Data binding in Rich Text Fields

Technical Questions CMS
1

According to this knowledgebase article it should be possible:

However doing {{state.productName}} shows up as is. I’ve followed the instructions on Integration Tips - Builder.io and added isolated-vm. I’m also attempting this on localhost.

Not sure what I’m missing?

I’ve tried putting it in custom code, I’ve tried setting state.productName in the Custom Code at the page level and editing the RTE field as code. I’ve added a content input to try and set State as well

2

Hi @wsaunders,

Could you let us know which builder SDK and version you’re using? This will help us try to reproduce the issue on our end.

It seems to be working fine with the fallback editor, so we suspect the issue might be related to a particular SDK or implementation.

Looking forward to your response!

Screenshot 2025-01-28 at 4.37.36 PM
Screenshot 2025-01-28 at 4.37.36 PM2874×1037 253 KB

3

We are using Builder.io: Visual Development Platform 8.0.4 and Builder.io: Visual Development Platform 6.0.2. On top of next.js hosted through vercel.

When I try to use the fallback editor, it also doesn’t work.

Screenshot 2025-01-29 at 3.49.36 PM
Screenshot 2025-01-29 at 3.49.36 PM1112×727 327 KB

4

Hi @wsaunders,

This issue is a known configuration challenge with Vercel. In certain Node server environments, the Builder SDK may require additional initialization steps, particularly for a package called isolated-vm, which is used to safely evaluate your data bindings.

If you’re using Builder’s Gen 1 SDKs and data binding with a provider that uses edge workers (e.g., Cloudflare, Netlify, or Vercel), you might encounter issues where certain dependencies are automatically removed during ISR (Incremental Static Regeneration) functions.

Two key indicators can help identify this issue:

  • Hydration errors: When SSR and client-side versions differ because the data binding did not execute on the server.
  • Missing data: When data is missing on the server side but appears on the client side, indicating that data binding didn’t execute on the server.

This may result in a failure with the safeDynamicRequire function. To resolve this, consider the following workaround.

For Next.js Pages Router:

In the pages/_document.jsx file (or any server-only execution location), add the following code:

import ivm from 'isolated-vm';
import { Builder } from '@builder.io/react';

const isolate = new ivm.Isolate({ memoryLimit: 128 });
const context = isolate.createContextSync();
Builder.setServerContext(context);

If your project doesn’t have a _document.tsx file, you can place the code elsewhere, but make sure to wrap it with this condition:

if (Builder.isServer) {
  // Add the provided code here
}

For App Router:

In the page.tsx responsible for rendering Builder content, import isolated-vm at the start of the Page component:

export default async function Page(props) {
  // Import must be inside the Page component
  await import('isolated-vm');

  //... the rest of your component logic
}

Then, in your next.config.js, add isolated-vm to the experimental.serverComponentsExternalPackages list:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["isolated-vm"],
  },
};

export default nextConfig;

For more details, please refer to the following link: Builder SDK Integration Tips.

I hope this helps! Let us know if you need further assistance or have any other questions.

Thanks,

5

I did that, however you should know that the info is outdated a bit. serverComponentsExternalPackages is now just serverExternalPackages, and is no longer under experimental.