Since Builder.io sdk react 2.0.3, BuilderComponent doesn’t pass in the localization properties for the custom component. It gives undefined values which used to be translation base on locale set to BuilderComponent
Detailed steps to reproduce the bug
Add custom component into the page and set one of the value with localization text
Use NextJS to render the page
When it renders in browser, content will be mismatch because on server side, component get undefined text but in the browser, BuilderComponent renders component with translation text.
We’ve recently added locale prop support to the react sdk please use @builder.io/react@2.0.5 or above, I also recoreded a video to demo localizing custom components inputs using the new prop:
I updated the sdk to the latest version and passed the locale value to BuilderComponent in this case Default but in the NextJS server side, all localization properties are still undefined however, in the browser, the values that pass to the component are correct.
I also just realised that now Builder has two ways to enter localisation text. We used to use Localize Text from the popup below to enter localisation.
Hi @maythee, it looks like from my end with the new updates you should see the “Block Options” for localized custom components and the “Localize Text” option for inline field level localization. Since they are different localization methods, that may be why you are seeing two ways to enter localized text.
Thanks @ancheetah for the guide, do you know which one should we use? or what’s the prefer way? also both way doesn’t seem to fix the server side render in NextJS, I still get blank property when generate static page from server side.
@maythee you would use either one or the other depending on the case since they are for different localization methods. You shouldn’t have the option to choose from both for a single component. Can you please share a Github or Codesandbox that minimally reproduces the server side mismatch? I am not having this issue in my setup. Thanks!
I think I found the issue, most of our custom components are build and use with translations from the Input that is not flag as localized before. We have these components live, anyway to make it works with new localized input?
Hi @maythee , as for the hydration mismatch this should be resolved if you use our new useIsPreviewing hook which you can see an example of here.
As for the localized components, I don’t believe there is currently a way once you’ve updated to the latest SDK version since the return type is different now.
