Webpack can not load wasm

[oovm]

• [x] I confirm that this is an issue rather than a question.

Bug report

Unable to recognize the loader even if chainWebpack has been set.

(undefined) ./node_modules/_wasm-crypto-moe@1.0.2@wasm-crypto-moe/wasm_crypto_moe.js 177:22
Module parse failed: Unexpected token (177:22)
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
| async function init(input) {
|     if (typeof input === 'undefined') {
>         input = import.meta.url.replace(/\.js$/, '_bg.wasm');
|     }
|     const imports = {};
 @ ./docs/bizarre/marysue.md?vue&type=script&lang=js& (./node_modules/_cache-loader@3.0.1@cache-loader/dist/cjs.js??ref--3-0!./node_modules/_babel-loader@8.1.0@babel-loader/lib??ref--3-1!./node_modules/_cache-loader@3.0.1@cache-loader/dist/cjs.js??ref--1-0!./node_modules/_vue-loader@15.9.3@vue-loader/lib??ref--1-1!./node_modules/_@vuepress_markdown-loader@1.5.4@@vuepress/markdown-loader??ref--1-2!./docs/bizarre/marysue.md?vue&type=script&lang=js&) 71:0-71 84:19-23 87:36-50 88:36-50
 @ ./docs/bizarre/marysue.md?vue&type=script&lang=js&
 @ ./docs/bizarre/marysue.md
 @ ./node_modules/_@vuepress_core@1.5.4@@vuepress/core/.temp/internal/page-components.js
 @ ./node_modules/_@vuepress_core@1.5.4@@vuepress/core/lib/client/util.js
 @ ./node_modules/_@vuepress_core@1.5.4@@vuepress/core/lib/client/app.js
 @ ./node_modules/_@vuepress_core@1.5.4@@vuepress/core/lib/client/serverEntry.js
 @ multi ./node_modules/_@vuepress_core@1.5.4@@vuepress/core/lib/client/serverEntry.js
Error: Failed to compile with errors.
    at D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_@vuepress_core@1.5.4@@vuepress\core\lib\node\build\index.js:180:16
    at finalCallback (D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_webpack@4.44.2@webpack\lib\MultiCompiler.js:254:12)
    at D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_webpack@4.44.2@webpack\lib\MultiCompiler.js:277:6
    at done (D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_neo-async@2.6.2@neo-async\async.js:2931:13)
    at runCompilers (D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_webpack@4.44.2@webpack\lib\MultiCompiler.js:181:48)
    at D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_webpack@4.44.2@webpack\lib\MultiCompiler.js:188:7
    at D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_webpack@4.44.2@webpack\lib\MultiCompiler.js:270:7
    at finalCallback (D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_webpack@4.44.2@webpack\lib\Compiler.js:257:39)
    at D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_webpack@4.44.2@webpack\lib\Compiler.js:273:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_tapable@1.1.3@tapable\lib\HookCodeFactory.js:33:10), <anonymous>:33:1)
    at AsyncSeriesHook.lazyCompileHook (D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_tapable@1.1.3@tapable\lib\Hook.js:154:20)
    at onCompiled (D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_webpack@4.44.2@webpack\lib\Compiler.js:271:21)
    at D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_webpack@4.44.2@webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_tapable@1.1.3@tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_tapable@1.1.3@tapable\lib\Hook.js:154:20)
    at D:\Rust\crypto-random-map\projects\wasm-vuepress\node_modules\_webpack@4.44.2@webpack\lib\Compiler.js:678:31
Waiting for the debugger to disconnect...
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build:doc: `vuepress build docs`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ build:doc script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Steps to reproduce

• project: crypto-moe/.vuepress

The following is the minimum reproduction:

• package.json:

{
    "dependencies": {
        "vuepress": "^1.5.4",
        "wasm-crypto-moe": "^1.0.2",
        "wasm-loader": "^1.3.0"
    },
    "devDependencies": {}
}

• Markdown:

<script type="module">
    import init, { marysue_encode, marysue_decode } from 'wasm-crypto-moe'
    async function run() {
        await init("https://unpkg.com/wasm-crypto-moe@1.0.2/wasm_crypto_moe_bg.wasm");
        window.marysue_encode = marysue_encode;
        window.marysue_decode = marysue_decode;
    }
    run();
</script>

• config.js:

module.exports = {
    dest: 'docs/.build',
    chainWebpack: (config, isServer) => {
        config.module
            .rule('wasm')
            .test(/\.wasm$/)
            .use('wasm-loader')
            .loader('wasm-loader')
            .end()
    },
};

What is expected?

What is actually happening?

Other relevant information

• Output of npx vuepress info in my VuePress project:

[aquachris]

I believe the issue is that vuepress uses webpack 4, which does not recognize the import.meta syntax (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta).

I had a similar error message and solved it by installing the @open-wc/webpack-import-meta-loader package (https://github.com/open-wc/open-wc/tree/master/packages/webpack-import-meta-loader) as a dev dependency. After that, vuepress needs to be told to use that loader. Make the following changes in your vuepress config:

configureWebpack: {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: require.resolve('@open-wc/webpack-import-meta-loader')
      }
    ]
  }
}

Hope this helps!

And if anyone knows a better way to achieve this, I'm definitely interested.