Localized blocks show as [object Object] when published

General
1

Builder content link
https://builder.io/content/66b156f53cbd44a2abfcd42efc09ae6e

Builder public api key
64dd5478e25746bf9db3b6c0319905f6

What are you trying to accomplish
Get localized content working on live pages

Screenshots or video link
image

Code stack you are integrating Builder with
react

My issue is similar to this one from April. That thread lead me to add my locale value to the BuilderComponent’s options like so:

const options = {userAttributes: {urlPath, locale}};

<BuilderComponent model="page" locale={locale} data={builderIoState} {...{options}} />

Still, my single component set up for localization ATM renders as [object Object]. I have verified in the React Components inspector that all the necessary values are in place:

image
image836×396 21 KB

This page is live now on our internal IP-whitelisted network. What am I doing wrong?

2

FWIW, my fix was to just provide content for all of the locales and not rely on the default locale content to fall through. It’s not ideal, but it resolved the issues I posted about originally.

3

Thanks for chiming in. Gave this a shot by assigning a value to the ‘en’ localized version of the component. Still renders as [object Object], unfortunately.

4

Hello @ReavoEnd,

Could you try passing the locale option as well?

const page =
    (await builder
      .get('page', {  
        apiKey: builderConfig.apiKey,
        userAttributes: {
              urlPath: '/' + (params?.path?.join('/') || ''),
              locale: locale,
            },
        options: {
              locale: locale // passing locale in options 
        },    
      })
      .toPromise()) || null
5

@manish-sharma How would this work for Static Pages in Next.js? We won’t have the locale data available at build time.

6

Hello @chtbks-jason,

For static pages, this is a known issue and our product team working on deploying a possible fix, meanwhile, there is a suggested workaround of passing options={\"locale\":\"usa-USD\"} with the builder-component as shown below for the static pages

     let tempInnerHTML = page.data.data.html;
     let newInnerHTML = tempInnerHTML.replace(
     "<builder-component",
     `<builder-component options={\"locale\":\"usa-USD\"} `
     );

Hope this helps!

7

@manish-sharma I’m a little confused by the recommendation. If we pass “usa-USD” as a locale, how will Builder know the actual browser locale for the user?

Also, I attempted implementing that solution and I’m still seeing [object Object] on the static page where I’m trying to use localized content. You can see for yourself at Custom Mini Photo Books - Chatbooks Monthly Mini Photo Books.

image

8

A quick note as I figured out the issues I was having. First, I moved our pages that need localization from SSG to SSR. Second, I realized that I was passing locale through as a userAttribute. This is incorrect. locale should be passed as a root level property of options in both the builder.get call and in the Builder component.

builder.get('pageModelKey', {
 userAttributes: {...},
 options: {
    locale: locale ?? 'en-US'
  }
}

<BuilderComponent ... options={{ userAttributes: {...}, locale }} />

Hopefully this will help somebody else. FWIW, it looks like the documentation Integrate Localization - Builder.io has been updated and is much clearer than it was before.

9

Hi manish,

I am using ReactJS, which never calls builder.get(). The only function of the builder object I ever call is builder.init(). For some reason, there are no longer ReactJS examples in the official documentation, either.

Passing locale as a root level property of the options attribute in <BuilderComponent /> does not seem to be sufficient, either. What am I missing?

image

10

Update: I have now attempted to integrate the builder.get() call into my setup. I am storing the results of builder.get() into a state variable called content, then passing content as an attribute of <BuilderComponent />.

My new problem is this: When I pass the content attribute, my translated blocks on the page show up properly. Great! BUT. Under these circumstances, none of my page’s custom JS (from the “Edit Content JS + CSS” window) runs. That’s a big problem.

As soon as I stop passing the content attribute into BuilderComponent, everything reverts. Translated blocks show as [object Object], but my custom JS runs.

Any idea what’s going on here?

11

Hello @ReavoEnd,

Can you confirm which react and builder/react SDK version are you using?

12

I was using:

{
    "react": "^17.0.1",
    "@builder.io/react": "^2.0.1",
    "@builder.io/widgets": "^1.2.22"
}

Now, I have upgraded to the latest versions of the builder SDK:

{
    "react": "^17.0.1",
    "@builder.io/react": "^3.0.6",
    "@builder.io/widgets": "^1.2.24"
}

And BOTH of the scenarios I describe above behave as though the content attribute is being passed. So now no matter what I do, translated blocks show up properly, but my custom JS is no longer running.

13

Hello @ReavoEnd,

Are you getting any errors in the browser console when the custom JS code is not running?

14

No, there are no relevant browser console errors. Which is making it all the more complicated to troubleshoot.

15

Update: Overnight, my PC updated and so today, I had to restart my environment. Now, everything related to this topic is working.

Perhaps updating the React SDK dependencies worked after all, and I just needed to reload everything.

For anyone wondering: in my React JS environment, I did not end up using react.get() at all. It seems the React SDK was simply too old/out of date, and did not support Builder’s locale switching properly.

1 Like