Search code examples
node.jsnpmwebpackrustwebassembly

Rust & Wasm intitial set up

I am following this tutorial on creating a webassembly app using rust, but when I try to run the bundled web assembly code with node (before adding any of my own code and while following the tutorial exactly)

$ npm run start
> create-wasm-app@0.1.0 start /Users/jakearmendariz/Desktop/wasm/wasm-game-of-life/www
> webpack-dev-server

/Users/jakearmendariz/Desktop/wasm/wasm-game-of-life/www/node_modules/copy-webpack-plugin/node_modules/schema-utils/dist/validate.js:98
    throw new _ValidationError.default(errors, schema, configuration);
    ^

ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] should be an object:
   object { patterns, options? }
    at validate (/Users/jakearmendariz/Desktop/wasm/wasm-game-of-life/www/node_modules/copy-webpack-plugin/node_modules/schema-utils/dist/validate.js:98:11)
    at new CopyPlugin (/Users/jakearmendariz/Desktop/wasm/wasm-game-of-life/www/node_modules/copy-webpack-plugin/dist/index.js:32:30)
    at Object.<anonymous> (/Users/jakearmendariz/Desktop/wasm/wasm-game-of-life/www/webpack.config.js:12:5)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at WEBPACK_OPTIONS (/Users/jakearmendariz/Desktop/wasm/wasm-game-of-life/www/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/Users/jakearmendariz/Desktop/wasm/wasm-game-of-life/www/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /Users/jakearmendariz/Desktop/wasm/wasm-game-of-life/www/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/jakearmendariz/Desktop/wasm/wasm-game-of-life/www/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at Object.<anonymous> (/Users/jakearmendariz/Desktop/wasm/wasm-game-of-life/www/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:40)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! create-wasm-app@0.1.0 start: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the create-wasm-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jakearmendariz/.npm/_logs/2020-09-11T04_46_27_442Z-debug.log

webpack.config

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require('path');

module.exports = {
  entry: "./bootstrap.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bootstrap.js",
  },
  mode: "development",
  plugins: [
    new CopyWebpackPlugin(['index.html'])
  ],
};

package.json dependencies

  "dependencies": {
    "minimist": "^1.2.5",
    "wasm-game-of-life": "file:../pkg"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^6.1.0",
    "hello-wasm-pack": "^0.1.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.11.0"
  }

I redid the tutorial exactly as before and I got the same results. I assume its a problem with my npm set up but I am unsure.

Solution

  • I had a similar error when I updated the version of copy-webpack-plugin from the one specified in the tutorial files due to a security alert. The format of the config parameters changed at the same time, so I had to change them to match.

    The tutorial had "copy-webpack-plugin": "^5.0.3" and I upgraded to "copy-webpack-plugin": "^6.0.3", and in webpack.config.js I had to change

        new CopyPlugin([
      path.resolve(__dirname, "static")
    ]),

        new CopyPlugin({
      patterns: [
        path.resolve(__dirname, "static")
      ]
    }),

    I am not familiar with webpack or copy-webpack-plugin other than through the same rust-wasm tutorial you're following, so use this advice at your own risk; I can only say that it appeared to work.