import * as wasm from './[pkg_name]_bg' is causing an error.

[j-fdion]

I get this error in [pkg_name].js file which is generated by wasm-pack (where [pkg_name] is the name of your rust project):

Uncaught (in promise) Error: Cannot find module './sand_bg' at webpackMissingModule (sand.js:7) at eval (sand.js:7) at Module../pkg/sand.js (0.js:22) at __webpack_require__ (app-v2.js:84) at eval (sand_bg.wasm:8) at Module../pkg/sand_bg.wasm (0.js:33) at __webpack_require__ (app-v2.js:84) at eval (render.js:8) at Module../src/render.js (0.js:80) at __webpack_require__ (app-v2.js:84) webpackMissingModule @ sand.js:7 (anonymous) @ sand.js:7 ./pkg/sand.js @ 0.js:22 __webpack_require__ @ app-v2.js:84 (anonymous) @ sand_bg.wasm:8 ./pkg/sand_bg.wasm @ 0.js:33 __webpack_require__ @ app-v2.js:84 (anonymous) @ render.js:8 ./src/render.js @ 0.js:80 __webpack_require__ @ app-v2.js:84 (anonymous) @ simulation.js:2 ./src/simulation.js @ 0.js:92 __webpack_require__ @ app-v2.js:84 Promise.then (async) (anonymous) @ app.js:7 ./src/app.js @ app-v2.js:4460 __webpack_require__ @ app-v2.js:84 (anonymous) @ client:3 0 @ app-v2.js:4518 __webpack_require__ @ app-v2.js:84 (anonymous) @ app-v2.js:254 (anonymous) @ app-v2.js:257
from this import :
import * as wasm from './sand_bg';

To correct it:

import * as wasm from '.[pkg_name_bg]';
instead should be:
import * as wasm from '.[pkg_name_bg].wasm';

wasm-pack version: wasm-pack 0.8.1
rustc version: rustc 1.38.0-nightly (481068a70 2019-07-05)

[Pauan]

Are you using Angular? There are currently some issues with using Wasm with Angular (but we are working on the fixes).

[j-fdion]

I'm using Vue. Here's my whole dependency list:

"devDependencies": { "@babel/core": "^7.5.0", "@babel/preset-env": "^7.5.0", "@wasm-tool/wasm-pack-plugin": "^1.0.0", "babel-loader": "^8.0.6", "babel-plugin-module-resolver": "^3.2.0", "babel-polyfill": "^6.26.0", "css-loader": "^0.28.11", "cssnano": "^3.10.0", "mini-css-extract-plugin": "^0.4.0", "node-sass": "^4.9.0", "postcss-loader": "^2.1.5", "sass-loader": "^7.0.3", "vue-loader": "^15.2.4", "vue-style-loader": "^4.1.0", "vue-template-compiler": "^2.5.16", "webpack": "^4.35.2", "webpack-cli": "^3.3.5", "webpack-dev-server": "3.7.2" }, "dependencies": { "glsl-hsv2rgb": "^1.0.0", "glsl-noise": "^0.0.0", "glsl-random": "^0.0.5", "glslify": "^7.0.0", "glslify-loader": "^2.0.0", "lodash": "^4.17.11", "raw-loader": "^3.0.0", "vue": "^2.6.10" }

[ibaryshnikov]

It was fixed in rustwasm/wasm-bindgen#1646
At the moment the workaround is to add .wasm to webpack.config.js to resolve.extensions field