[Builder.io]: Failed code evaluation: Cannot read properties of undefined (reading 'Isolate')

[MaximeGratens]

Hello,

For the past few weeks, we've been working with Manish to resolve an issue, but we haven't been able to determine the cause. We are using Remix.js with Node.js version 20. Locally, the performance is optimal because we're running on macOS, and the SDK does not utilize an isolated VM. The following log message appears:

[Builder.io]: Skipping the use ofisolated-vmto avoid crashes on an arm64 machine with Node v20.
However, in production, whenever Builder attempts to run in an isolated VM, it logs an error:

[Builder.io]: Failed code evaluation: Cannot read properties of undefined (reading 'Isolate') { code: 'var _virtual_index=state.resourceDropdown; return _virtual_index' }
This results in significantly slower performance on our production server.

To reproduce this issue locally, you can simulate it by replacing

const isArm64 = process.arch === 'arm64';
with

const isArm64 = process.arch === 'test';

You will observe that performance deteriorates and the error message changes. Using the NODE_OPTIONS=--no-node-snapshot flag does not mitigate the issue.

The only workaround we've found for running Builder in production involves modifying the architecture flag during deployment:

RUN grep -rli 'arm64' * | xargs -i@ sed -i 's/arm64/x64/g' @

We believe there is an incompatibility between the isolated VM and Remix.js.

We have been struggling with this issue for weeks alongside Manish...

[samijaber]

Where are you deploying Remix? Remix encourages you to deploy to an edge runtime, which inherently does not support the isolated-vm package, as it uses NodeJS internals.

If you are deploying to an edge runtime, you need to update your imports to @builder.io/sdk-react/edge, so that they do not rely on isolated-vm at all. We are working on updating our documentation regarding the Gen2 SDK to reflect this information.

[riceboyler]

I'm seeing a similar issue after moving to Gen 2 React SDK, but I'm running on Next.js v14.1 and I'm only seeing these errors locally. I'm using Node 18, so isolated-vm shouldn't be an issue here, though I am running on an M1 Macbook Pro.

At least I'm only seeing issues locally, our preview builds on Vercel (haven't pushed Gen 2 to production yet) seem to be performing just as well as on Gen 1.

@tgaribal ☝️ This is the same issue I emailed you about yesterday.

[MaximeGratens]

We are deploying on fly.io using node20.

I just tried to deploy the Remix project on Vercel Edge using the Vercel preset for Remix and @builder.io/sdk-react/edge. However, the result was an error: [GET] /en reason=EDGE_FUNCTION_INVOCATION_TIMEOUT, status=504, user_error=true.

[MaximeGratens]

Same on Cloudflare page, with import {Content, fetchOneEntry} from "@builder.io/sdk-react"; and import {Content, fetchOneEntry} from "@builder.io/sdk-react/edge"; and I'm getting Worker exceeded resource limits

[MaximeGratens]

const e = safeDynamicRequire("isolated-vm");
  
  return new e.Isolate({
    memoryLimit: 128
  }).createContextSync();

In my side e undefined, I think it's because of this

EDIT : https://www.builder.io/c/docs/guides/connecting-api-data#using-the-react-sdk-with-ssr-on-cloud-hosting-services

I tried to add

const context = isolate.createContextSync();
Builder.setServerContext(context);

inside the loader of my root.tsx but now I can't deploy to the edge :

The Edge Function "*" is referencing unsupported modules:
        - isolated-vm: ./out/isolated_vm

[ruben-trdj]

We are also facing this issue with remix sdk when we migrate from 1 to 2

[samijaber]

Hey folks. I wanted to provide some updates:

• When it comes to deploying a Nextjs Pages app on Vercel, we have identified an issue on the side of Next/Vercel and are waiting for a fix: eval("require")(PACKAGE) fails on Vercel in Pages router, unless pre-rendering. vercel/next.js#63492. The SDK seems unable to import the isolated-vm package when it's deployed on Vercel. We are actively investigating this and looking for workarounds. We know that pre-rendering the page seems to resolve the issue, and the issue does not seem to reproduce in a Next App router app.
• We have recently added a caching layer to our dynamic bindings evaluation: https://github.com/BuilderIO/builder/blob/main/packages/sdks/output/react/CHANGELOG.md#1012 . This should greatly enhance the performance of the SDK, which might be the root cause behind the Worker exceeded resource limits issues.

We are still investigating further and will let you know when we have a solution

[MaximeGratens]

Hey @samijaber ,

I just deploy on our staging server on fly (performance@2x) the new sdk without the RUN grep -rli 'arm64' * | xargs -i@ sed -i 's/arm64/x64/g' @

So, now the server is not crashing! but the performance are still not acceptable in a seo pespective...

The output of the log is still the same : [Builder.io]: Failed code evaluation: Cannot read properties of undefined (reading 'Isolate') {

[MaximeGratens]

Hello,

Any idea on how we can help you on this?

[MaximeGratens]

Hello, any news about this?

@samijaber

[samijaber]

hey @MaximeGratens, we are currently investigating the problem and will update this issue when we have found a resolution.

[samijaber]

We have released v1.0.21 of the React Gen 2 SDK with a fix regarding this issue. Read the changelog carefully for details: https://github.com/BuilderIO/builder/blob/main/packages/sdks/output/react/CHANGELOG.md#1021

There is also a documentation page up explaining how to use the workaround: https://www.builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments

@MaximeGratens The timeouts you were seeing were a separate issue tied to the usage of a global fetch in fetchOneEntry. The Remix integration docs will be improved soon, along with a Remix example highlighting how you can resolve it. For reference, you need to explicitly provide the remix WebFetch implementation as a fetch prop:

import { fetch as webFetch } from "@remix-run/web-fetch";

export const loader = async ({ params, request }: LoaderFunctionArgs) => {
  const page = await fetchOneEntry({
    /***/
    fetch: webFetch,
  });

  //...
};

This will be thoroughly explained in our integration docs for Remix soon.

I am closing this issue, but feel free to update it with any relevant information if the problem persists on your end.

[MaximeGratens]

Hello @samijaber ,

Thank for all we migrated all our projects with the new sdk and it's far better.

In production since the migration, our apps are crashing because the ram and cpu is used at 100%

Also, we are still having this log and it's killing our log output : 2024-04-24T08:51:21.766 app[9080292a0d4518] cdg [info] [Builder.io]: Skipping evaluation of empty code block.

EDIT: I just saw the 1.0.23 ahah!