❗️❗️ WebAssembly.instantiate break all

[luca-smartpricing]

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:  [email protected]
- Builder:          -
- User Config:      telemetry, nitro, vite, experimental, runtimeConfig, css, modules, site, sitemap, schemaOrg, i18n, googleFonts, gtm, tailwindcss, prismic, postcss, devtools
- Runtime Modules:  @nuxtjs/[email protected], @zadigetvoltaire/[email protected], @nuxtjs/[email protected], @vueuse/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], [email protected]
- Build Modules:    -

[harlan-zw]

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]

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
[email protected] overridden
[email protected]

[pi0]

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-zw]

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?

[pi0]

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-zw]

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

[harlan-zw]

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]

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

[lzinga]

@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-zw]

@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?

[lzinga]

@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)

[cliqer]

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-zw]

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.