Bug: WebAssembly Module Parse Failed in Webpack Configuration

Question

Bug: WebAssembly Module Parse Failed in Webpack Configuration

fabriguespe opened this issue 9 months ago · comments

Describe the bug

After updating to XMTP v11.3.0 the application throws an error. The error message suggests that the WebAssembly module is not enabled in the Webpack configuration.

Steps to reproduce the bug

Installing or updating to XMTP v11.3.0

Fabri · Answer 1 · Thu Nov 02 2023 01:03:41 GMT+0800 (China Standard Time)

The error is due to WebAssembly not being enabled in the webpack configuration. Since webpack 5, WebAssembly is not enabled by default and is flagged as an experimental feature.

You can enable WebAssembly in your webpack configuration by adding the experiments field. Here's how you can do it:

// webpack.config.js

module.exports = {
  //...
  experiments: {
    asyncWebAssembly: true, // for async modules
    // or
    // syncWebAssembly: true, // like webpack 4, but it's deprecated
  },
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: "webassembly/async", // for async modules
        // or
        // type: "webassembly/sync", // like webpack 4, but it's deprecated
      },
      // other rules...
    ],
  },
  //...
};

If you are using @craco then on the craco.config.js:

module.exports = {
  webpack: {
    configure: (config) => {
      config.experiments = {
        asyncWebAssembly: true,
        layers: true,
      };

      // turn off static file serving of WASM files
      // we need to let Webpack handle WASM import
      config.module.rules
        .find((i) => "oneOf" in i)
        .oneOf.find((i) => i.type === "asset/resource")
        .exclude.push(/\.wasm$/);

      return config;
    },
  },
};

Johnny Goodpick · Answer 2 · Sat Dec 09 2023 04:46:14 GMT+0800 (China Standard Time)

I tried to implement this on Nextjs in order to make beta version work but it doesnt solve the issue in my case.

I dont believe there's much to do but I'm not too familiar with this, the initial error saying to set the experimental webassembly support has disappeared, I only get this error now:

ENOENT: no such file or directory, open 'C:\work\test\.next\server\chunks\user_preferences_bindings_wasm_bg.wasm'

Any advice to implement this on Nextjs 14 ?

Here's our next.config.js:

const nextConfig = {
	compiler: {
		styledComponents: { displayName: false },
	},
	webpack: (config, { isServer }) => {
		const experiments = config.experiments || {}
		config.experiments = { ...experiments, asyncWebAssembly: true, layers: true }
		config.module.rules.push({
			test: /\.wasm$/,
			type: "webassembly/async",
		})
		return config
	},
	reactStrictMode: true,
	staticPageGenerationTimeout: 100,
}

Nicholas Molnar · Answer 3 · Sat Dec 09 2023 08:42:55 GMT+0800 (China Standard Time)

@rygine is working on some improvements to our webpack examples

Fabri · Answer 4 · Sat Dec 09 2023 08:43:37 GMT+0800 (China Standard Time)

Awesome!

I can confirm that it is not working with NextJS

I tried the solutions mentioned in this threads, without success:

vercel/next.js#27083
vercel/next.js#25852
vercel/next.js#53163

Ry Racherbaumer · Answer 5 · Tue Dec 19 2023 04:51:17 GMT+0800 (China Standard Time)

with the latest beta (16), use the following config to ensure WASM files are loaded:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // tell webpack to load WASM files as an asset resource
    config.module.rules.push({
      test: /\.wasm$/,
      type: "asset/resource",
    });
    return config;
  },
};

module.exports = nextConfig;

Fabri · Answer 6 · Sat Dec 23 2023 00:50:26 GMT+0800 (China Standard Time)

With the latest (19) there is no need to use config anymore.

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = nextConfig;

anhben · Answer 7 · Tue Feb 27 2024 11:08:05 GMT+0800 (China Standard Time)

config.module.rules.push({
      test: /\.wasm$/,
      type: "asset/resource",
    });

When we'try change config. --> it was showed one message errror wasm.language_new_plutus_v1 is not a function

Johnny Goodpick · Answer 8 · Sun Mar 03 2024 10:29:36 GMT+0800 (China Standard Time)

I tried to implement this on Nextjs in order to make beta version work but it doesnt solve the issue in my case.

I dont believe there's much to do but I'm not too familiar with this, the initial error saying to set the experimental webassembly support has disappeared, I only get this error now:

ENOENT: no such file or directory, open 'C:\work\test\.next\server\chunks\user_preferences_bindings_wasm_bg.wasm'

Any advice to implement this on Nextjs 14 ?

Here's our next.config.js:
const nextConfig = {
	compiler: {
		styledComponents: { displayName: false },
	},
	webpack: (config, { isServer }) => {
		const experiments = config.experiments || {}
		config.experiments = { ...experiments, asyncWebAssembly: true, layers: true }
		config.module.rules.push({
			test: /\.wasm$/,
			type: "webassembly/async",
		})
		return config
	},
	reactStrictMode: true,
	staticPageGenerationTimeout: 100,
}

There seems to be a regression on this between v5.0.3 (working) and v5.1.0 (not working) on @xmtp/react-sdk,
I am getting the same error message as before when updating, same specs on my end :)

Fabri · Answer 9 · Mon Mar 04 2024 06:04:40 GMT+0800 (China Standard Time)

Thanks to feedback from the ETH Denver hackathon, making the import of the parent component dynamic solves the issue.

import dynamic from 'next/dynamic';
const FloatingInbox = dynamic(() => import('./FloatingInbox-hooks'), { ssr: false });

https://github.com/fabriguespe/xmtp-quickstart-hooks-next

Ry Racherbaumer · Answer 10 · Mon Mar 04 2024 07:19:29 GMT+0800 (China Standard Time)

@fabriguespe i wonder if marking the component that uses WASM as client only would also solve this...

Fabri · Answer 11 · Mon Mar 04 2024 11:00:23 GMT+0800 (China Standard Time)

You mean using "use client"? bcs that didn't work :s. Without the Dynamic imports fails on build:

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (4/5)  [=   ] 
Error: ENOENT: no such file or directory, open '/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/.next/server/app/user_preferences_bindings_wasm_bg.wasm'
    at Object.openSync (node:fs:603:3)
    at Object.readFileSync (node:fs:471:35)
    at 31227 (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/.next/server/app/page.js:1:16734)
    at t (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/.next/server/webpack-runtime.js:1:143)
    at 96397 (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/.next/server/app/page.js:92:144363)
    at t (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/.next/server/webpack-runtime.js:1:143)
    at F (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:91937)
    at /Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94352
    at W._fromJSON (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94790)
    at JSON.parse (<anonymous>) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/.next/server/app/user_preferences_bindings_wasm_bg.wasm'
}

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: ENOENT: no such file or directory, open '/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/.next/server/app/user_preferences_bindings_wasm_bg.wasm'
    at Object.openSync (node:fs:603:3)
    at Object.readFileSync (node:fs:471:35)
    at 31227 (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/.next/server/app/page.js:1:16734)
    at t (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/.next/server/webpack-runtime.js:1:143)
    at 96397 (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/.next/server/app/page.js:92:144363)
    at t (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/.next/server/webpack-runtime.js:1:143)
    at F (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:91937)
    at /Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94352
    at W._fromJSON (/Users/fabrizioguespe/DevRel/xmtp-quickstart-hooks-next/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94790)
 ✓ Generating static pages (5/5) 

> Export encountered errors on following paths:
        /page: /

Ry Racherbaumer · Answer 12 · Tue Mar 12 2024 02:58:30 GMT+0800 (China Standard Time)

@fabriguespe is this still an open issue?

Nicholas Molnar · Answer 13 · Tue Mar 12 2024 03:23:46 GMT+0800 (China Standard Time)

Have we documented how and when to use dynamic imports to fix this issue?

Johnny Goodpick · Answer 14 · Mon Jun 17 2024 20:09:38 GMT+0800 (China Standard Time)

This bug was gone so far but it seems to have reappeared after I updated these:

From:

"@xmtp/content-type-reaction": "^1.1.7",
"@xmtp/content-type-remote-attachment": "^1.1.8",
"@xmtp/content-type-reply": "^1.1.9",

To:

"@xmtp/content-type-reaction": "^1.1.9",
"@xmtp/content-type-remote-attachment": "^1.1.9",
"@xmtp/content-type-reply": "^1.1.11"

I use same config (nextjs) as previously, latest versions for everything, other important package versions that I use are:

"@xmtp/react-sdk": "6.0.1",
"typescript": "^5.4.5",
"next": "^14.2.4",

Error occurred prerendering page "/plans". Read more: https://nextjs.org/docs/messages/prerender-error

Error: ENOENT: no such file or directory, open 'C:\work\redacted\.next\server\chunks\user_preferences_bindings_wasm_bg.wasm'
Error occurred prerendering page "/discover". Read more: https://nextjs.org/docs/messages/prerender-error

Error: ENOENT: no such file or directory, open 'C:\work\redacted\.next\server\chunks\user_preferences_bindings_wasm_bg.wasm'

Tested on windows, macos and vercel

Johnny Goodpick · Answer 15 · Tue Jun 18 2024 05:07:44 GMT+0800 (China Standard Time)

It seems that whenever @xmtp/user-preferences-bindings-wasm@^0.3.5 gets updated to 0.3.6 by
"@xmtp/content-type-reply": "^1.1.11" , the build will fail on nextjs.

As a temporary "fix", changing the yarn.lock or package.lock file manually to replace @xmtp/user-preferences-bindings-wasm@^0.3.6 version by 0.3.5 and changing required version for the js package aswell
and then yarn install seems to allow build to succeed, but it's not good enough fix for production