Fails to load WASM file in Next.js app router

[cbratschi]

I am getting the following error while using blurhash-to-css in the Next.js app router:

- error Error: ENOENT: no such file or directory, open '/.../.next/server/app/[lang]/[[...slug]]/blurhash_to_css_bg.wasm'
    at Object.openSync (node:fs:592:3)
    at Object.readFileSync (node:fs:460:35)
    at eval (webpack-internal:///(rsc)/../../node_modules/blurhash-to-css/pkg/blurhash_to_css.js:181:65)
    at (rsc)/../../node_modules/blurhash-to-css/pkg/blurhash_to_css.js (/.../.next/server/app/[lang]/[[...slug]]/page.js:1808:1)
    at __webpack_require__ (/....next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/../../node_modules/blurhash-to-css/index.js:6:27)

Next.js tried to load blurhash_to_css_bg.wasm from the .next/server folder instead of the pkg folder of the module.

The blurhash-to-css code looks correct:

const path = require('path').join(__dirname, 'blurhash_to_css_bg.wasm');
const bytes = require('fs').readFileSync(path);

Therefore this looks like a Next.js Webpack bundling issue.

[cbratschi]

Could be related to:

https://github.com/vercel/next.js/issues/25852 https://github.com/vercel/next.js/discussions/35637

A pure JavaScript version would be the easiest way to use this in a Next.js SSR component.

[cbratschi]

Ported the code to TypeScript for anyone interested: https://gist.github.com/cbratschi/a98c3b6270caa561c051af7cb17edb8b

However, data is larger than a inlined data URL image and there was some banding.