❗️❗️ WebAssembly.instantiate break all

Question

❗️❗️ WebAssembly.instantiate break all

luca-smartpricing opened this issue 4 months ago · comments

luca-smartpricing commented 4 months ago

Describe the bug

If I set nitro: { preset: 'netlify_edge' } with the @nuxtjs/seo module a build error appear and break deployment on Netlify

There are the errors:

[nitro] [unhandledRejection] TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object
    at __wbg_load (file:///Users/lucabortolussi/Projects/test-env/node_modules/@css-inline/css-inline-wasm/index.mjs:221:40)
    at __wbg_init (file:///Users/lucabortolussi/Projects/test-env/node_modules/@css-inline/css-inline-wasm/index.mjs:367:38)
    at async initWasm (file:///Users/lucabortolussi/Projects/test-env/node_modules/@css-inline/css-inline-wasm/index.mjs:380:3)
[nitro] [unhandledRejection] TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object
    at __wbg_load (file:///Users/lucabortolussi/Projects/test-env/node_modules/@resvg/resvg-wasm/index.mjs:417:40)
    at __wbg_init (file:///Users/lucabortolussi/Projects/test-env/node_modules/@resvg/resvg-wasm/index.mjs:531:38)
    at async initWasm (file:///Users/lucabortolussi/Projects/test-env/node_modules/@resvg/resvg-wasm/index.mjs:542:3)

Reproduction

https://stackblitz.com/edit/github-c7te5q-jnnmga?file=nuxt.config.ts

System / Nuxt Info

- Operating System: Darwin
- Node Version:     v20.11.0
- Nuxt Version:     3.10.3
- CLI Version:      3.10.1
- Nitro Version:    2.9.3
- Package Manager:  npm@10.2.4
- Builder:          -
- User Config:      telemetry, nitro, vite, experimental, runtimeConfig, css, modules, site, sitemap, schemaOrg, i18n, googleFonts, gtm, tailwindcss, prismic, postcss, devtools
- Runtime Modules:  @nuxtjs/google-fonts@3.1.3, @zadigetvoltaire/nuxt-gtm@0.0.13, @nuxtjs/tailwindcss@6.11.4, @vueuse/nuxt@10.9.0, @nuxtjs/prismic@3.1.0, @nuxtjs/i18n@8.1.1, @nuxtjs/seo@2.0.0-rc.8, @nuxt/image@1.4.0, nuxt-icon@0.6.9
- Build Modules:    -

Harlan Wilton · Answer 1 · Wed Mar 13 2024 08:32:42 GMT+0800 (China Standard Time)

You'll need to lock your Nitro version to v2.8.1 in your package.json until unjs/unwasm#20 is fixed

 "overrides": {
    "nitropack": "2.8.1"
  }

luca-smartpricing · Answer 2 · Wed Mar 13 2024 17:25:44 GMT+0800 (China Standard Time)

Edge function crash and new error:

[nitro] [unhandledRejection] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".wasm" for /Users/lucabortolussi/Projects/smartpricing-website/node_modules/@css-inline/css-inline-wasm/index_bg.wasm
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
    at async link (node:internal/modules/esm/module_job:76:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

[nitro] [unhandledRejection] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".wasm" for /Users/lucabortolussi/Projects/smartpricing-website/node_modules/@resvg/resvg-wasm/index_bg.wasm
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
    at async link (node:internal/modules/esm/module_job:76:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

I checked the dependencies with npm list --all
nitropack@2.8.1 overridden
nuxt-og-image@3.0.0-rc.43

Pooya Parsa · Answer 3 · Fri Mar 15 2024 00:01:57 GMT+0800 (China Standard Time)

Latest version of unwasm supports ?module you might use in this module to support resvg-js

--

@harlan-zw btw is it expected that you are using wasm for prerender bundle as well? It adds to size and slows speed.

Harlan Wilton · Answer 4 · Fri Mar 15 2024 07:47:39 GMT+0800 (China Standard Time)

Latest version of unwasm supports ?module you might use in this module to support resvg-js

--

@harlan-zw btw is it expected that you are using wasm for prerender bundle as well? It adds to size and slows speed.

This does seems like a bug, it should use the node version in a build environment. It should fallback to the wasm version in unsupported build environments (StackBlitz). I don't think this issue relates to that though?

Pooya Parsa · Answer 5 · Fri Mar 15 2024 18:35:31 GMT+0800 (China Standard Time)

This does seems like a bug, it should use the node version in a build environment.

I spotted issue on Cloudflare pages with undocs (i guess latest Node.js LTS). Good to know that at least it is not intentional to always use wasm 👍🏼

Harlan Wilton · Answer 6 · Sat Mar 16 2024 09:35:56 GMT+0800 (China Standard Time)

@luca-smartpricing Please try RC 47, should be working.

Harlan Wilton · Answer 7 · Sat Mar 16 2024 09:36:37 GMT+0800 (China Standard Time)

I spotted issue on Cloudflare pages with undocs (i guess latest Node.js LTS). Good to know that at least it is not intentional to always use wasm 👍🏼

nuxt-modules/og-image#177

luca-smartpricing · Answer 8 · Mon Mar 18 2024 22:37:46 GMT+0800 (China Standard Time)

@harlan-zw
Yess, it work! Thank you!

Lucas · Answer 9 · Thu Apr 04 2024 08:31:16 GMT+0800 (China Standard Time)

@harlan-zw Yess, it work! Thank you!

I am somewhat new to nuxt and this seo module. I am unsure exactly what the fix here is. I am getting this issue in my latest project and not sure what to do.

Harlan Wilton · Answer 10 · Thu Apr 04 2024 09:15:06 GMT+0800 (China Standard Time)

@harlan-zw Yess, it work! Thank you!

I am somewhat new to nuxt and this seo module. I am unsure exactly what the fix here is. I am getting this issue in my latest project and not sure what to do.

Can you provide the version and nitro preset you're using?

Lucas · Answer 11 · Fri Apr 05 2024 00:08:54 GMT+0800 (China Standard Time)

@harlan-zw Yess, it work! Thank you!

I am somewhat new to nuxt and this seo module. I am unsure exactly what the fix here is. I am getting this issue in my latest project and not sure what to do.

Can you provide the version and nitro preset you're using?

Here is my nuxt config and I am using Nuxt 3.11.1 with Nitro 2.9.5

export default defineNuxtConfig({
  devtools: {
    enabled: true,

    timeline: {
      enabled: true,
    },
  },
  css: ['~/assets/css/main.css'],
  nitro: {
    preset: "cloudflare-pages"
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    hid: 'nuxt-color-mode-script',
    globalName: '__NUXT_COLOR_MODE__',
    componentName: 'ColorScheme',
    classPrefix: '',
    classSuffix: '',
    storageKey: 'nuxt-color-mode'
  },
modules: ["nitro-cloudflare-dev", 'nuxt-swiper', "@nuxt/image", '@nuxtjs/color-mode', '@nuxtjs/seo']
})

and this is the full error

 ERROR  [nitro] [unhandledRejection] Unknown file extension ".wasm" for C:\Users/project\.nuxt\dev\wasm\index_bg-dd4dd8881e2df4e6.wasm

  at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
  at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
  at defaultLoad (node:internal/modules/esm/load:143:22)
  at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
  at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
  at async link (node:internal/modules/esm/module_job:76:21)

Protogon · Answer 12 · Sun Apr 07 2024 11:28:14 GMT+0800 (China Standard Time)

When using nitro: { preset: "bun" } it works
It seems it tries to load the wasm when cloudflare-pages preset is selected.

My Solution was to force nitro preset:

    nitro: {
        $development: {
            preset: 'bun',
        },
        $production: {
            preset: 'cloudflare-pages'
        }
    }

Harlan Wilton · Answer 13 · Sun Apr 07 2024 18:02:05 GMT+0800 (China Standard Time)

This should be fixed as of og-image RC 52. If you are still running into problems, please make a new issue on that repo.