Vue-cli: Import WASM using webpack

[greenpdx]

Version

3.0.0-alpha.5

Reproduction link

https://github.com/greenpdx/rustwasm

Steps to reproduce

npm install

npm run server

What is expected?

I expect webpack to load the wasm file

I am using https://github.com/ballercat/wasm-loader

In vue.config.js I have added the suggested loader config for wasm-loader. But cache-loader is still trying to load WASM file

What is actually happening?

94% asset optimization

ERROR Failed to compile with 1 errors 18:35:40

error in ./src/tst.wasm

Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

@ ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"/home/ubuntu/newvue/node_modules/.cache/cache-loader"}!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue 18:0-30
@ ./src/components/HelloWorld.vue
@ ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"/home/ubuntu/newvue/node_modules/.cache/cache-loader"}!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080/ (webpack)/hot/dev-server.js ./src/main.js

---

This is my first try using version 3. My finial goal is to load cv.js which is opencv 3.1.0 compiled to wasm. But I run out of memory importing 'cv'.
I am starting with a small example first.

[yyx990803]

Remove the vue block in your package.json and it should work. Sorry this is a pretty confusing behavior at the moment :o

[greenpdx]

I did that and now I get webpack errors
What would be the correct way to add a new loader?

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.loader should be an object.
  -> Custom values available in the loader context.
  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
• configuration.loader should be an object.
  -> Custom values available in the loader context.
  at webpack (/home/ubuntu/newvue/node_modules/webpack/lib/webpack.js:19:9)
  at Promise (/home/ubuntu/newvue/node_modules/@vue/cli-service/lib/commands/serve.js:78:24)
  at new Promise ()
  at portPromise.then.port (/home/ubuntu/newvue/node_modules/@vue/cli-service/lib/commands/serve.js:51:37)
  at
  at process._tickCallback (internal/process/next_tick.js:160:7)
  at Function.Module.runMain (module.js:703:11)
  at startup (bootstrap_node.js:193:16)
  at bootstrap_node.js:617:3
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! [email protected] serve: vue-cli-service serve
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the [email protected] serve 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! /home/ubuntu/.npm/_logs/2018-02-01T20_47_07_846Z-debug.log
ubuntu@angular:~/newvue$

[yyx990803]

Well your vue.config.js isn't providing the right webpack config.

Loaders need to declared in module.rules.

[greenpdx]

I am sorry but my webpack knowledge is limited. What is the correct webpack.config?

I got it working by editing node_modules/@vue/cli-service/lib/config/base.js
and added
webpackConfig.module
.rule('wasm')
.test(/.wasm$/)
.use('wasm-loader')
.loader('wasm-loader')

What do I add to vue.config.js and where do I add it? There are two section
configureWebpack: config => {
and
configureWebpack: {

[yyx990803]

module.exports = {
  chainWebpack: webpackConfig => {
    webpackConfig.module
     .rule('wasm')
       .test(/.wasm$/)
       .use('wasm-loader')
       .loader('wasm-loader')
  }
}

[greenpdx]

thanks that worked,

[maitysubhasis]

Facing a similar problem,
while using the above config keeps giving the same error I tried the following

config.module
      .rule("wasm")
      .test(/\.(wasm)(\?.*)?$/)
      .type("javascript/auto")
      .use("wasm-loader")
      .loader("wasm-loader")

using the above I am able to log the function imported from wasm but while calling the function
I am getting
is not a function
error

BTW I am trying with the wasm-pack-template