Dynamic bindings (symbols with reference) not working in production

Technical Questions
1

Hello!

I wrote my site in next.js, and added lots of symbols with reference and dynamic bindings, and followed by @TimG advice, we added the includeRef property as well, and it works fine in localhost.

I want my site to be server-side-rendered, so true to nextjs I have my getstaticpaths, getstaticprops calls, and in the end as I look at the post-build output I have my files.

So what I would like to achieve is that even if no javascript is enabled in the browser (just to make sure that the rendering is not done on client side), the page should still be rendered using pure html + css.

The json shown below is a proprietary format that is represented by the Builder.io SDK.

It works fine on localhost, but in production environment something is wrong.
Here is an example of what I mean:
I deployed to Vercel and Netlify as well, same issue on both, so I guess it is somehow related to Builder as well.
sites:
https://eclectic-brigadeiros-6a18ae.netlify.app/hu/vallalkozasok/barion-smart-gateway/
https://barion-builderio.vercel.app/hu/vallalkozasok/barion-smart-gateway/

Localhost demo WITHOUT enabling js, everything is okey:

image
image1920Ă—1037 93.9 KB

Let’s check the production:
Example id: builder-8a48d18ca8934107ac4f928c828fb847:

image
image1920Ă—1211 140 KB

And without the JS:

image
image1920Ă—920 134 KB

You can see that the components which are not symbols are working properly, these are custom components or basic Builder widgets. But the referenced dynamic symbols are not there.

As you can see the layout of the elements are visible in the DOM, the only thing missing from this is to link the ids in the SSR file and display them on the page, because as you can see in the attached file, it contains all the necessary data.

image
image2338Ă—938 424 KB

Here is the output of the html and json file.
html:

So on localhost: npm run build & npm run start, so the production version of localhost everything is working properly, all the ids will be connected with the components in the dom and rendered.
I will create a minimal demo example with this use-case and deploy it, so we can investigate there why are the symbols not loading up.

I think it is not related with my code, and not with the deployed version (neither vercel nor netlify), i think it is Builder.io related. If you could show me a deployed SSR Builder page with symbol than I would like to see and compare it with our solution.

2

Here is the code to reproduce on your site:

This is the most minimalist demo ever, nothing special, I used Builder.io official nextjs-template, and added the includeRefs to the custom symbol page.

Live-site:
https://demo-builder-ssr.vercel.app/

Repository:

When you disable the JS extension, and try on localhost, everything looks good, all the symbols and components are SSR, when you see the production app the symbols are not loading up.

I think this is the easiest app ever, and the dynamic fields, reference symbol SSR is not working properly, so I don’t think this issue is related with the hosting service (neither netlify nor vercel), can your dev team please investigate on this case?

3

Hi @radikris thank you for this detailed update, this is very helpful. I will take this back to our team to investigate and see if we have any new findings to share!

1 Like
4

Hey @radikris so we did some more digging and were able to find the issue. It looks like some deployment platforms strip out one of our dependencies on the deployment to production that causes the data bindings to not get evaluated on the server. Luckily there is a fairly straight forward fix, you just need to make sure to explicitly add the dependency like so:

within your next.config.js file:

...
webpack: (config) => {
    config.externals = (config.externals || []).concat('vm2');
    return config;
  },
...

And then within your app code:

import { Builder } from '@builder.io/react'

if (Builder.isServer) {
  try {
    // tricking whatever stripping vm2 to include it on server
    require('vm2');
  } catch(e) {
    console.error(e)
  }
}

You can see a commit with the code change to a fork of your repo here:

And it working on the deployed site here:
https://demo-builder-ssr-vm2.vercel.app/

Try this out and see if it works for yall!

2 Likes
5

Hi @TimG !

Thank you very muuuuch and for aziz as well! I can’t emphasize how happy I am after the struggling to make it happen, and finally it is now working!

I would suggest, you pin this forum post in your documentation as well.

1 Like
6

@TimG I noticed only 1 thing, but opened a new forum post:

Can you please check that out too?

1 Like