# Dynamic bindings (symbols with reference) not working in production

**URL:** <https://forum.builder.io/t/dynamic-bindings-symbols-with-reference-not-working-in-production/2522>\
**Category:** Technical Questions\
**Created:** [August 25, 2022, 10:37am UTC](https://forum.builder.io/t/dynamic-bindings-symbols-with-reference-not-working-in-production/2522 "2022-08-25T10:37:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [August 25, 2022, 10:37am UTC](https://forum.builder.io/t/dynamic-bindings-symbols-with-reference-not-working-in-production/2522/1 "2022-08-25T10:37:12Z")

</div>

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](http://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://eclectic-brigadeiros-6a18ae.netlify.app/hu/vallalkozasok/barion-smart-gateway/)  
[https://barion-builderio.vercel.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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/2406f4d0b6678cad5ed5a0842eb6cdc8ef7aabd8.jpeg)

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/25ef9f57738180e916dbd63cba4104d5cff46e7d.jpeg)

And without the JS:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/60c7171f59efa1da23e7fc62abf8931466bb4750.jpeg)  
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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/dc4fd2f24411283fec7d6b8becfa98919ea1e771.png)

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

> **[Online HTML File Editor | Text to HTML Converter - 4html.net](https://4html.net/1-913.html#ocMCK7ye)**
>
> Online HTML File Editor with full features tools. You can create, edit, test, and save HTML files. Real-time collaboration and review of results.

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](http://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.

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [August 25, 2022, 11:46am UTC](https://forum.builder.io/t/dynamic-bindings-symbols-with-reference-not-working-in-production/2522/2 "2022-08-25T11:46:50Z")

</div>

Here is the code to reproduce on your site:

This is the most minimalist demo ever, nothing special, I used [Builder.io](http://Builder.io) official nextjs-template, and added the includeRefs to the custom symbol page.

Live-site:  
[https://demo-builder-ssr.vercel.app/](https://demo-builder-ssr.vercel.app/)

Repository:

> **[GitHub - radikris/demo-builder-ssr](https://github.com/radikris/demo-builder-ssr)**
>
> Contribute to radikris/demo-builder-ssr development by creating an account on GitHub.

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?

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [August 25, 2022, 10:02pm UTC](https://forum.builder.io/t/dynamic-bindings-symbols-with-reference-not-working-in-production/2522/3 "2022-08-25T22:02:34Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [September 2, 2022, 7:43pm UTC](https://forum.builder.io/t/dynamic-bindings-symbols-with-reference-not-working-in-production/2522/4 "2022-09-02T19:43:22Z")

</div>

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:

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

```

And then within your app code:

```auto
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:

> <https://github.com/teleaziz/demo-builder-ssr/commit/69b9aa0dfc8f37d9f0264c31f19ab4fa8c0133df>

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

Try this out and see if it works for yall!

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [September 3, 2022, 5:01pm UTC](https://forum.builder.io/t/dynamic-bindings-symbols-with-reference-not-working-in-production/2522/5 "2022-09-03T17:01:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![radikris](https://avatars.discourse-cdn.com/v4/letter/r/48db29/32.png) [@radikris](https://forum.builder.io/u/radikris)\
**Post date:** [September 3, 2022, 5:24pm UTC](https://forum.builder.io/t/dynamic-bindings-symbols-with-reference-not-working-in-production/2522/6 "2022-09-03T17:24:15Z")

</div>

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

> [@Dynamic binding 'class' not working first load](https://forum.builder.io/t/dynamic-binding-class-not-working-first-load/2558):
>
> Hi everyone, hi @TimG maybe it is related to our previous tasks, that’s why I tag you. Page: [Adatvezérelt Fizetések Bárhol a Világon - Barion](https://barion-builderio.vercel.app/hu/) So in my symbol, where I use dynamic data binding: The css classes: .gridmultiline{ display: flex !important; } .gridsimpleline{ display: none !important; } @media (max-width: 999px) { .gridmultiline{ display: none !important; } .gridsimpleline{ display: flex !important; } } To see the component: Add page preview link: [https:/…](https://barion-builderio.vercel.app/ __builder-customgrid__ )

Can you please check that out too?

---

<div class="post-metadata">

**Author:** ![AlipesDan](https://avatars.discourse-cdn.com/v4/letter/a/77aa72/32.png) [@AlipesDan](https://forum.builder.io/u/AlipesDan)\
**Post date:** [May 7, 2024, 1:18am UTC](https://forum.builder.io/t/dynamic-bindings-symbols-with-reference-not-working-in-production/2522/7 "2024-05-07T01:18:54Z")

</div>

I am having a similar issue on AWS amplify but this fix did not work for me. Any suggestions?