wasm-pack and webpack 5

[BenoitDel]

I am trying to make wasm-pack and webpack 5 works together.
They work well all together (out of the box) only for the most simple use case.
If memory or imports are necessary, modification has to be made to the wasm-pack build to adjust with:

• the new import syntax of webpack 5
• the absence of node module like utils

I have several questions:

• What is the roadmap for wasm-pack and webpack 5 ?
• may i fill issue(s) about these compatibility problems ?
• If yes, should i fill the issue here or on wasm-bindgen repo ?

[BenoitDel]

wasm-bindgen is taking care of it.
wasm bindgen-2110

[samvv]

A short update on Webpack 5 support. If you're using the most recent version of Webpack you need to add the following to webpack.config.js:

{
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: 'webassembly/sync',
      }
    ]
  },
  experiments: {
    syncWebAssembly: true
  }
}

Note that this requires the now deprecated syncWebAssembly backend. If you're getting the following error:

Uncaught (in promise) LinkError: WebAssembly.instantiate(): Import #0 module="./edmund_bg.js" function="__wbg_new_59cb74e423758ede" error: function import requires a callable

You're using the new experimental asyncWebAssembly backend that is currently not working too well with wasm-pack.

Given that the working configuration is now deprecated, I'm curious to how asyncWebAssembly will evolve and how it will integrate with wasm-pack. No idea if the error is a bug in Webpack or in this project.

[superjose]

I'm currently diving into Web Assembly, and I was wondering what is this "new Web Assembly spec", and whether it's something that wasm-pack will handle, or is there a consideration that we need to take into working with Rust itself.

[tcper]

Finally, I found this!
CRA not work freaks me out, recommend add this content to README

[HarikrishnanBalagopal]

Any update on this? Still facing issues

[klu235]

I am using webpack v5.88.2 and webpack-dev-server v4.15.1. I tried samvv's suggested changes in webpack.config.js, and still got the following error when trying to run webpack-dev-server:

export 'memory' (imported as 'memory') was not found in 'wasm-for-my-site/my_website_bg'

The export of the memory variable is supposed to be done by my_website_bg.wasm.d.ts, and this export works perfectly in webpack4, but not in webpack5.

webpack's frequent breaking of backwards compatibility is disappointing, to say the least. Its documentation also contains many grammar mistakes that some of the maintainers refuse to correct, even when given pull requests with corrections of those errors and no other changes.

I hope the Rust and WASM communities move on to better-documented and more consistent bundlers in the future.

[xudong7]

I try to run npm i && npm run start to run the service, but I met some problems....😥😥
This is package.json in ./wasm-game-of-life/www

{
  "name": "create-wasm-app",
  "version": "0.1.0",
  "description": "create an app to consume rust-generated wasm packages",
  "main": "index.js",
  "bin": {
    "create-wasm-app": ".bin/create-wasm-app.js"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rustwasm/create-wasm-app.git"
  },
  "keywords": [
    "webassembly",
    "wasm",
    "rust",
    "webpack"
  ],
  "author": "Ashley Williams <ashley666ashley@gmail.com>",
  "license": "(MIT OR Apache-2.0)",
  "bugs": {
    "url": "https://github.com/rustwasm/create-wasm-app/issues"
  },
  "homepage": "https://github.com/rustwasm/create-wasm-app#readme",
  "dependencies": {                     
    "wasm-game-of-life": "file:../pkg"
  },
  "devDependencies": {
    "hello-wasm-pack": "^0.1.0",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5",
    "copy-webpack-plugin": "^5.0.0"
  }
}

This is my node and npm version:

$ node -v
v23.6.1

$ npm -v
10.7.0

---

I run npm i && npm run start, but...

$ npm i && npm run start
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm warn deprecated move-concurrently@1.0.1: This package is no longer supported.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated figgy-pudding@3.5.2: This module is no longer supported.
npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm warn deprecated copy-concurrently@1.0.5: This package is no longer supported.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm warn deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm warn deprecated fs-write-stream-atomic@1.0.10: This package is no longer supported.
npm warn deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 614 packages, and audited 616 packages in 5s

44 packages are looking for funding
  run `npm fund` for details

21 vulnerabilities (1 low, 5 moderate, 15 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

> create-wasm-app@0.1.0 start
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\rustproject\wasm-game-of-life\www
× ｢wdm｣: Hash: 08156ed46b94b1e15299
Version: webpack 4.47.0
Time: 759ms
Built at: 2025/04/01 01:43:20
         Asset       Size  Chunks             Chunk Names
0.bootstrap.js   6.77 KiB       0  [emitted]
  bootstrap.js    440 KiB    main  [emitted]  main
    index.html  297 bytes          [emitted]
Entrypoint main = bootstrap.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./bootstrap.js 40 bytes {main} [built]
[../pkg/wasm_game_of_life.js] 203 bytes {0} [built]
[./bootstrap.js] 279 bytes {main} [built]
[./index.js] 58 bytes {0} [built]
[./node_modules/ansi-html-community/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.52 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
    + 66 hidden modules

ERROR in ../pkg/wasm_game_of_life_bg.wasm
Module parse failed: Unknown element type in table: 0xNaN
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Error: Unknown element type in table: 0xNaN
    at new CompileError (D:\rustproject\wasm-game-of-life\www\node_modules\@webassemblyjs\helper-api-error\lib\index.js:40:109)
    at parseTableType (D:\rustproject\wasm-game-of-life\www\node_modules\@webassemblyjs\wasm-parser\lib\decoder.js:984:13)
    at parseTableSection (D:\rustproject\wasm-game-of-life\www\node_modules\@webassemblyjs\wasm-parser\lib\decoder.js:1240:24)
    at parseSection (D:\rustproject\wasm-game-of-life\www\node_modules\@webassemblyjs\wasm-parser\lib\decoder.js:1375:25)
    at Object.decode (D:\rustproject\wasm-game-of-life\www\node_modules\@webassemblyjs\wasm-parser\lib\decoder.js:1696:25)
    at decode (D:\rustproject\wasm-game-of-life\www\node_modules\@webassemblyjs\wasm-parser\lib\index.js:248:21)
    at WebAssemblyParser.parse (D:\rustproject\wasm-game-of-life\www\node_modules\webpack\lib\wasm\WebAssemblyParser.js:74:19)
    at D:\rustproject\wasm-game-of-life\www\node_modules\webpack\lib\NormalModule.js:482:32
    at D:\rustproject\wasm-game-of-life\www\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\rustproject\wasm-game-of-life\www\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\rustproject\wasm-game-of-life\www\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (D:\rustproject\wasm-game-of-life\www\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\rustproject\wasm-game-of-life\www\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\rustproject\wasm-game-of-life\www\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at D:\rustproject\wasm-game-of-life\www\node_modules\graceful-fs\graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3)
 @ ../pkg/wasm_game_of_life.js 1:0-52 4:15-19 5:0-21
 @ ./index.js
 @ ./bootstrap.js

ERROR in chunk 0
6b2a059819ade281e43e.module.wasm
D:\rustproject\wasm-game-of-life\pkg\wasm_game_of_life_bg.wasm
unexpected end
i ｢wdm｣: Failed to compile.

PLEASE HELP ME!! THANK YOU!! 😥😻