Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"isolated-vm import error" on Vercel with Nuxt #3288

Open
20x-dz opened this issue May 10, 2024 · 1 comment
Open

"isolated-vm import error" on Vercel with Nuxt #3288

20x-dz opened this issue May 10, 2024 · 1 comment
Assignees

Comments

@20x-dz
Copy link

20x-dz commented May 10, 2024

Describe the bug
I see the following errors in the Vercel log after visiting a builder.io page (the page seems to render fine though):

[Builder.io]:  isolated-vm import error. Error: Cannot find module 'isolated-vm'
Require stack:
- /var/task/node_modules/@builder.io/sdk-vue/lib/node/index-551oCh4n.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
    at Module._load (node:internal/modules/cjs/loader:981:27)
    at /opt/rust/nodejs.js:1:11508
    at Function.Qt (/opt/rust/nodejs.js:1:11878)
    at Q.e.<computed>.K._load (/opt/rust/nodejs.js:1:11478)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:177:18)
    at getIvm (file:///var/task/node_modules/@builder.io/sdk-vue/lib/node/index-551oCh4n.js:318:15)
    at runInNode (file:///var/task/node_modules/@builder.io/sdk-vue/lib/node/index-551oCh4n.js:350:13)
    at chooseBrowserOrServerEval (file:///var/task/node_modules/@builder.io/sdk-vue/lib/node/index-551oCh4n.js:391:108) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/var/task/node_modules/@builder.io/sdk-vue/lib/node/index-551oCh4n.js'
  ]
}

followed by

[Builder.io]:  Failed code evaluation: [Builder.io]: could not import `isolated-vm` module for safe script execution on Node server.
    
    In certain Node environments, the SDK requires additional initialization steps. This can be achieved by 
    importing and calling `initializeNodeRuntime()` from "@builder.io/sdk-react/node/init". This must be done in
    a server-only execution path within your application.

    Please see the documentation for more information: https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments
     {
  code: 'var __awaiter=function(e,t,n,r){return new(n||(n=Promise))((function(i,o){function a(e){try{c(r.next(e))}catch(e){o(e)}}function u(e){try{c(r.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,u)}c((r=r.apply(e,t||[])).next())}))},__generator=function(e,t){var n,r,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:u(0),throw:u(1),return:u(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function u(o){return function(u){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(i=(i=a.trys).length>0&&i[i.length-1])&&(6===o[0]||2===o[0])){a=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(6===o[0]&&a.label<i[1]){a.label=i[1],i=o;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(o);break}i[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,u])}}};function main(){return __awaiter(this,void 0,void 0,(function(){var e,t,n;return __generator(this,(function(r){return Builder.isServer,Builder.isBrowser&&(e=document.getElementById("toggleSwitch"),t=document.getElementById("price"),n=document.getElementById("membership-link"),e.addEventListener("change",(function(){this.checked?(t.textContent="0000",n.href="https://example.com"):(t.textContent="0000",n.href="https://example.com")}))),[2]}))}))}var _virtual_index=main();return _virtual_index'
}

The link provided in the 2nd error message only provides a solution for Next.js (React), not for Nuxt (Vue).

To Reproduce
Steps to reproduce the behavior:

  1. Visit our page
  2. see the errors in the log

Expected behavior
No errors in the logs?

Screenshots
image

Additional context
Happens on @builder.io/sdk-vue v1.0.22 as well as v1.0.27 (latest version) on the current Nuxt3 release.

Our main page template ([...slug].vue) loading the content:

<template>
  <div>
    <div v-if="content || isPreviewing()">
      <Content
        model="page"
        :can-track="false"
        :content="content"
        :api-key="builderApiKey"
        :custom-components="REGISTERED_COMPONENTS" />
    </div>
  </div>
</template>

<script setup>
import { Content, fetchOneEntry, isPreviewing } from "@builder.io/sdk-vue";
import FaqItems from "~/components/block/FaqItems.vue";
import Drawer from "~/components/builder.io/Drawer.vue";
import { useCustomHead } from "~/composables/useCustomHead";

// Register your Builder components
const REGISTERED_COMPONENTS = [
  {
    canHaveChildren: false,
    component: FaqItems,
    inputs: [
      {
        name: "faqItems",
        required: true,
        type: "object",
      },
      {
        name: "title",
        type: "text",
      },
    ],
    name: "BlockFaqItems",
  },
  {
    canHaveChildren: true,
    component: Drawer,
    inputs: [
      {
        name: "id",
        required: true,
        type: "text",
      },
    ],
    name: "Drawer",
  },
];

const config = useRuntimeConfig();
const builderApiKey = ref(config.public.builderApiToken);
const isDev = import.meta.dev;
// the app url is also set to example.com on preview environments
const isStaging = config.public.appUrl === "https://example.com";

const route = useRoute();

// fetch builder content data
const { data: content } = await useAsyncData("builderData", () =>
  fetchOneEntry({
    apiKey: builderApiKey.value,
    model: "page",
    options: {
      includeUnpublished: isPreviewing() || isDev || isStaging,
    },
    userAttributes: {
      urlPath: route.path,
    },
  }),
);

if (content.value === null) {
  throw createError({
    fatal: true,
    statusCode: 404,
    statusMessage: "Page Not Found",
  });
}

useCustomHead({
  metaDescription: content.value.data.description,
  metaImage: {
    data: {
      attributes: {
        url: content.value.data.previewImage,
      },
    },
  },
  metaTitle: content.value.data.title,
});
</script>
@samijaber samijaber self-assigned this May 14, 2024
@samijaber
Copy link
Contributor

Thanks for filing. We will investigate and let you know when we have a fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants