webpack wasm loader fails: Unexpected section: 0xfa

[greenpdx]

Summary

I am using wasm-pack to create a wasm file using the framework @vue/cli. @vue/cli is easy to use but it hides all the webpack stuff. I have tried about 4 different ways to load the wasm file. It will not load.

Try 1: fails at WebAssembly.instantiate()

  let opt = {

    }
  console.log('0')
    const response = await fetch('/wasm/wasmgraph_bg.wasm');
    console.log('1')
    const module = await WebAssembly.compileStreaming(response);
    console.log('2', module)
    let imp = WebAssembly.Module.exports(module)
    console.log(imp)
    const instance = await WebAssembly.instantiate(module, opt);
    console.log('3')
    const result = instance.exports.greet('test');
    console.log(result);
})()

Try 2: Fails
add wasm-loader to webpack config

Try 3:

const rust = import('@/../pkg/wasmgraph')
rust
        .then(m => {
          console.log(m)
          let a = m.add(1,2)
        })
        .catch(err => console.log(err))

Try 4:
import add from '@/../pkg/wasmgraph'

Versions:
webpack: 4.32.2
@vue/cli-service: 3.8.0
@vue/cli-service/node_modules/@webassemblyjs/wasm-parser: 1.7.11




### Additional Details

Provide any additional details here.

ERROR message

wasmgraph@0.1.0 serve /home/ubuntu/wasmgraph
vue-cli-service serve

INFO Starting development server...
🧐 Checking for wasm-pack...

✅ wasm-pack is installed.

ℹ️ Compiling your crate in development mode...

[INFO]: Checking for the Wasm target...
[INFO]: Compiling to Wasm...
Finished dev [unoptimized + debuginfo] target(s) in 0.01s
[INFO]: Installing wasm-bindgen...
[INFO]: Optional fields missing from Cargo.toml: 'description', 'repository', and 'license'. These are not necessary, but recommended
[INFO]: :-) Done in 0.60s
[INFO]: :-) Your wasm pkg is ready to publish at ./pkg.
✅ Your crate has been correctly compiled

40% building 215/225 modules 10 active ...de_modules/axios/lib/cancel/isCancel.jsFailed to decode custom "name" section @18006; ignoring (integer representation too long).
98% after emitting CopyPlugin

ERROR Failed to compile with 2 errors 11:34:01 PM

error in ./pkg/wasmgraph_bg.wasm

Module parse failed: Unexpected section: 0xfa
You may need an appropriate loader to handle this file type.
Error: Unexpected section: 0xfa
at new CompileError (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/@webassemblyjs/helper-api-error/lib/index.js:40:109)
at parseSection (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/@webassemblyjs/wasm-parser/lib/decoder.js:1542:11)
at Object.decode (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/@webassemblyjs/wasm-parser/lib/decoder.js:1559:25)
at decode (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/@webassemblyjs/wasm-parser/lib/index.js:240:21)
at WebAssemblyParser.parse (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/webpack/lib/wasm/WebAssemblyParser.js:74:19)
at doBuild.err (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModule.js:460:32)
at runLoaders (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModule.js:342:12)
at /home/ubuntu/wasmgraph/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/ubuntu/wasmgraph/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array. (/home/ubuntu/wasmgraph/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/home/ubuntu/wasmgraph/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at provider (/home/ubuntu/wasmgraph/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
at /home/ubuntu/wasmgraph/node_modules/graceful-fs/graceful-fs.js:90:16
at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

@ ./pkg/wasmgraph.js 2:0-39 19:9-17 25:69-80 26:41-52
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=js&
@ ./src/components/HelloWorld.vue?vue&type=script&lang=js&
@ ./src/components/HelloWorld.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&
@ ./src/views/Home.vue?vue&type=script&lang=js&
@ ./src/views/Home.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://10.0.42.207:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

error in a880754bccdc7b1910d5.module.wasm

/home/ubuntu/wasmgraph/pkg/wasmgraph_bg.wasm
unexpected end

WAIT Compiling... 11:34:01 PM

40% building 0/1 modules 1 active .../ubuntu/wasmgraph/pkg/wasmgraph_bg.wasmFailed to decode custom "name" section @18006; ignoring (integer representation too long).
98% after emitting CopyPlugin

ERROR Failed to compile with 2 errors 11:34:02 PM

error in ./pkg/wasmgraph_bg.wasm

Module parse failed: Unexpected section: 0xfa
You may need an appropriate loader to handle this file type.
Error: Unexpected section: 0xfa
at new CompileError (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/@webassemblyjs/helper-api-error/lib/index.js:40:109)
at parseSection (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/@webassemblyjs/wasm-parser/lib/decoder.js:1542:11)
at Object.decode (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/@webassemblyjs/wasm-parser/lib/decoder.js:1559:25)
at decode (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/@webassemblyjs/wasm-parser/lib/index.js:240:21)
at WebAssemblyParser.parse (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/webpack/lib/wasm/WebAssemblyParser.js:74:19)
at doBuild.err (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModule.js:460:32)
at runLoaders (/home/ubuntu/wasmgraph/node_modules/@vue/cli-service/node_modules/webpack/lib/NormalModule.js:342:12)
at /home/ubuntu/wasmgraph/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/ubuntu/wasmgraph/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array. (/home/ubuntu/wasmgraph/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/home/ubuntu/wasmgraph/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at provider (/home/ubuntu/wasmgraph/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
at /home/ubuntu/wasmgraph/node_modules/graceful-fs/graceful-fs.js:90:16
at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3)

@ ./pkg/wasmgraph.js 2:0-39 19:9-17 25:69-80 26:41-52
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=js&
@ ./src/components/HelloWorld.vue?vue&type=script&lang=js&
@ ./src/components/HelloWorld.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&
@ ./src/views/Home.vue?vue&type=script&lang=js&
@ ./src/views/Home.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://10.0.42.207:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

error in a880754bccdc7b1910d5.module.wasm

/home/ubuntu/wasmgraph/pkg/wasmgraph_bg.wasm
unexpected end

[alexcrichton]

cc @xtuc, do you know if any recent webpack/webassemblyjs changes might affect this?

[CygnusRoboticus]

I am getting this error as well with ember-auto-import that operates the same way as @vue/cli sounds like it does, it's using webpack: 4.28.4.

This seems like a repeat of #1246.

EDIT: I take it all back, bumping to webpack: 4.32.2 fixes this for me. It looks like @vue/cli uses 4.28.4 as well @greenpdx, so you might try resolving a newer version if you're able to.

"resolutions": {
  "@vue/cli": "4.32.2" // or anything "^4.29.4"
}

[alexcrichton]

Thanks for confirming @CygnusRoboticus! Sounds like this is fixed in newer versions of Webpack, so I'm going to close.