Failed with webassembly on cloudflare page

[tchiotludo]

I have a nuxt content website on cloudflare page. I seen a lot of error on the log and all shiki highlight failed.

  (error) [nuxt] [request error] [unhandled] [500] WebAssembly.instantiate(): Wasm code generation disallowed by embedder
  at Module.getWasm (chunks/wasm.mjs:1:100)  
  at async chunks/nitro/cloudflare-pages.mjs:1:1015788  
  at async chunks/nitro/cloudflare-pages.mjs:1:1014797  
  at async a (chunks/nitro/cloudflare-pages.mjs:1:1014731)  
  at async chunks/nitro/cloudflare-pages.mjs:1:1013974  
  at async Promise.all (index 2)  
  at async getShikiInternal (chunks/nitro/cloudflare-pages.mjs:1:1021229)  
  at async a.langs (chunks/nitro/cloudflare-pages.mjs:1:1024736)  
  at async _getShiki (chunks/nitro/cloudflare-pages.mjs:1:1024701)

Seend that cloudflare page need a special configuration for shiki.

Example error on this page with the base page here

Does there is something to configure to make it nuxt content & shiki working on cloudflare page?

[farnabaz]

This should be fixed in edge version and soon will release. You can try edge version by adding "@nuxtjs/mdc": "npm:@nuxtjs/mdc-edge@latest" to the dependencies

[atinux]

I can confirm the edge version works.

[tchiotludo]

really nice, thanks for quick feedback. Do you have a release planned soon?

[farnabaz]

@tchiotludo It will be out today :)

[tchiotludo]

It didn't work for us but @farnabaz maybe we should add a clarification.

Behind the scene, we are not using nuxt content that will generate markdown during build time. We have some custom markdown that we want to parse using nuxt api (on the server side, so on cloudflare workers).

We are using this, we also tried to use a custom markdown parser.

None of them work, see here, that failed with that error calling internal api /api/_mdc/highlight:

GET https://develop.kestra.io/blueprints/216-monitor-availability-of-an-http-endpoint-and-send-a-slack-alert-if-a-service-is-unhealthy - Ok @ 4/5/2024, 6:54:56 PM
  (error) [nuxt] [request error] [unhandled] [500] WebAssembly.instantiate(): Wasm code generation disallowed by embedder
  at Module.getWasmInstance (chunks/_/wasm.mjs:1:622241)  
  at chunks/runtime.mjs:1:1017744  
  at async chunks/runtime.mjs:1:1016738  
  at async a (chunks/runtime.mjs:1:1016672)  
  at async chunks/runtime.mjs:1:1015915  
  at async Promise.all (index 2)  
  at async getShikiInternal (chunks/runtime.mjs:1:1023677)  
  at async a.langs (chunks/runtime.mjs:1:1027161)  
  at async _getShiki (chunks/runtime.mjs:1:1027126)  
  at async chunks/runtime.mjs:1:1027810
  (error) [url: GET /api/_mdc/highlight?code=id:+http_check%0Anamespace:+dev%0A%0Ainputs:%0A++-+id:+uri%0A++++type:+URI%0A++++defaults:+https:%2F%2Fkestra.io%0A%0Atasks:%0A++-+id:+api%0A++++type:+io.kestra.plugin.fs.http.Request%0A++++uri:+%22%7B%7B+inputs.uri+%7D%7D%22%0A%0A++-+id:+check_status%0A++++type:+io.kestra.core.tasks.flows.If%0A++++condition:+%22%7B%7B+outputs.api.code+!=+200+%7D%7D%22%0A++++then:%0A++++++-+id:+unhealthy%0A++++++++type:+io.kestra.core.tasks.log.Log%0A++++++++message:+Server+unhealthy!!!+Response+%7B%7B+outputs.api.body+%7D%7D%0A++++++-+id:+send_slack_alert%0A++++++++type:+io.kestra.plugin.notifications.slack.SlackIncomingWebhook%0A++++++++url:+%22%7B%7B+secret('SLACK_WEBHOOK')+%7D%7D%22%0A++++++++payload:+|%0A++++++++++%7B%0A++++++++++++%22channel%22:+%22%23alerts%22,%0A++++++++++++%22text%22:+%22The+server+%7B%7B+inputs.uri+%7D%7D+is+down!%22%0A++++++++++%7D%0A++++else:%0A++++++-+id:+healthy%0A++++++++type:+io.kestra.core.tasks.log.Log%0A++++++++message:+Everything+is+fine!%0A%0Atriggers:%0A++-+id:+daily%0A++++type:+io.kestra.core.models.triggers.types.Schedule%0A++++cron:+%220+9+*+*+*%22%0A&lang=yaml&theme=%22github-dark%22&options=%7B%22highlights%22:%5B%5D,%22meta%22:%22%22%7D] [status: 500] [length: -] [ip: -] [duration: 0ms]

Is there any way to configure a parser that will work on cloudflare (were Wasm is disabled at the runtime and not the build time)?

[adamdehaven]

@tchiotludo if the repo you linked is correct, you added the @nuxtjs/mdc-edge package directly but are still referencing @nuxtjs/mdc in your code.

Can you try updating your package.json entry to this?

"@nuxtjs/mdc": "npm:@nuxtjs/mdc-edge@0.6.2-28517347.0c8167c"

Then make sure your imports are still referencing @nuxtjs/mdc

[adamdehaven]

@farnabaz also, I think the fix here still needs to be released on the main @nuxtjs/mdc npm package; it's working for me as designed 🎉

[tchiotludo]

@adamdehaven thanks a lot for the help, it works locally but during build on cloudflare, I have this error:

22:51:50.596    [error] Nuxt Build Error: [vite:wasm-fallback] Could not load /opt/buildhome/repo/node_modules/shiki/dist/onig.wasm (imported by .nuxt/mdc-highlighter.mjs): "ESM integration proposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use `.wasm?init` or `.wasm?url`. See https://vitejs.dev/guide/features.html#webassembly for more details.
22:51:50.596      at Object.load (node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:49133:19)
22:51:50.596      at node_modules/vite-plugin-inspect/dist/index.mjs:406:26
22:51:50.597      at plugin.<computed> (node_modules/vite-plugin-inspect/dist/index.mjs:363:14)
22:51:50.597      at node_modules/rollup/dist/es/shared/node-entry.js:18639:40
22:51:50.597      at async PluginDriver.hookFirstAndGetPlugin (node_modules/rollup/dist/es/shared/node-entry.js:18539:28)
22:51:50.597      at async node_modules/rollup/dist/es/shared/node-entry.js:17709:33
22:51:50.597      at async Queue.work (node_modules/rollup/dist/es/shared/node-entry.js:18749:32)

that is not when building locally

adding the package vite-plugin-wasm as asked give me another error:

3:25:02.189 [error] Nuxt Build Error: [vite]: Rollup failed to resolve import "env" from "/opt/buildhome/repo/node_modules/shiki/dist/onig.wasm".
23:25:02.189    This is most likely unintended because it can break your application at runtime.
23:25:02.190    If you do want to externalize this module explicitly add it to
23:25:02.190    `build.rollupOptions.external`
23:25:02.190      This is most likely unintended because it can break your application at runtime.
23:25:02.190      If you do want to externalize this module explicitly add it to
23:25:02.190      `build.rollupOptions.external`
23:25:02.190      at viteWarn (node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:67190:27)
23:25:02.190      at onRollupWarning (node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:67218:9)
23:25:02.190      at onwarn (node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:66922:13)
23:25:02.191      at node_modules/rollup/dist/es/shared/node-entry.js:17367:13
23:25:02.191      at Object.logger [as onLog] (node_modules/rollup/dist/es/shared/node-entry.js:19025:9)
23:25:02.191      at ModuleLoader.handleInvalidResolvedId (node_modules/rollup/dist/es/shared/node-entry.js:17971:26)
23:25:02.191      at node_modules/rollup/dist/es/shared/node-entry.js:17929:26
23:25:02.260    Failed: Error while executing user command. Exited with error code: 1

edit: I got the same error locally when I use this command

export NITRO_PRESET=cloudflare-pages
npm run build

[adamdehaven]

If you check your version of nitropack (it's likely a sub-dependency) you need to have at least 2.9.3

Can you check?

[adamdehaven]

Also, you likely need to add the wasm import to your externals in your Nuxt config

vite: {
    build: {
      rollupOptions: {
        external: [
          'shiki/onig.wasm',
        ],
      },
    },
}

[tchiotludo]

Thanks for your help @adamdehaven :clap: There is progress! Without updating nitropack, and external configuration for onig.wasm, the build is working, but the command but running this command npx wrangler pages dev dist/ failed with that error:

✘ [ERROR] No loader is configured for ".wasm" files: _worker.js/wasm/onig-b1644a9e745f1309.wasm

    _worker.js/chunks/_/onig.mjs:1:861:
      1 │ ...await import("../../wasm/onig-b1644a9e745f1309.wasm").then((e=>e...
        ╵                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Build failed with 1 error:

  _worker.js/chunks/_/onig.mjs:1:861: ERROR: No loader is configured for ".wasm" files:
  _worker.js/wasm/onig-b1644a9e745f1309.wasm

Updating to latest nitropack don't change the behavior, any clue? :pray:

[LouisHaftmann]

Thanks for your help @adamdehaven 👏 There is progress! Without updating nitropack, and external configuration for onig.wasm, the build is working, but the command but running this command npx wrangler pages dev dist/ failed with that error:

✘ [ERROR] No loader is configured for ".wasm" files: _worker.js/wasm/onig-b1644a9e745f1309.wasm

    _worker.js/chunks/_/onig.mjs:1:861:
      1 │ ...await import("../../wasm/onig-b1644a9e745f1309.wasm").then((e=>e...
        ╵                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Build failed with 1 error:

  _worker.js/chunks/_/onig.mjs:1:861: ERROR: No loader is configured for ".wasm" files:
  _worker.js/wasm/onig-b1644a9e745f1309.wasm

Updating to latest nitropack don't change the behavior, any clue? 🙏

Try running npx wrangler pages dev dist/ or npx wrangler pages deploy dist/ with the --no-bundle option

[adamdehaven]

@tchiotludo what command are you using to build your site?

I have a site deployed via Cloudflare Pages that works properly with the latest version of the MDC module.

I use this nitro config in my nuxt.config.ts (note that I pre-render this particular site):

nitro: {
  preset: 'cloudflare-pages-static',
  prerender: {
    autoSubfolderIndex: false,
    crawlLinks: true,
  },
},