Error WebAssembly module is included in initial chunk.

[afrancht]

Using the require statement as suggested in the webpack example gives this the error bellow.

Argon2 is only imported in: https://github.com/afrancht/wasm-reproduction/blob/master/components/LandingPage.js

I have tried other types of import found in other GitHub Issues but with no luck!

Error:

[ error ] ./node_modules/argon2-browser/dist/argon2.wasm
WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:
* multi next-client-pages-loader?page=%2F&absolutePagePath=%2FUsers%2Fafrancht%2FDesktop%2Fhello%2Fpages%2Findex.js --> ./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F&absolutePagePath=%2FUsers%2Fafrancht%2FDesktop%2Fhello%2Fpages%2Findex.js --> ./pages/index.js --> ./components/index.js --> ./components/LandingPage.js --> ./node_modules/argon2-browser/lib/argon2.js --> ./node_modules/argon2-browser/dist/argon2.wasm

Sorry for bothering again, @antelle :):

[antelle]

Hi! Indeed it will. As I suggested here, please include this in your webpack.config:

+      config.module.rules.push({
+        test: /\.wasm$/,
+        loaders: ['base64-loader'],
+        type: 'javascript/auto',
+      });

[afrancht]

I am so sorry! I somehow missed that! Thank you so much. So from what I understood we are telling webpack to not parse wasm files as it would javascript files right? Since you have already compiled the wasm and somehow are able to execute it in the browser?

[antelle]

@afrancht there were several problems that I was fighting when crafting that config. I was writing a long comment, but then realized that it would be useful for everyone, so I added comments here, check it out: https://github.com/antelle/argon2-browser/blob/master/examples/webpack/webpack.config.js.