Closed general-ice closed 4 years ago
Hi! I've just checked, removing process: false
is not an issue, my example works without it as well. I guess, the problem is somewhere not in argon2-browser and you need to debug your webpack config. For example, add things one-by-one and check what fails, on which stage, etc...
@general-ice I'm encountering this same issue with create-react-app. Did you ever figure out a solution?
@chris13524 Hi, Unfortunately,I have not found a good decision. We needed do it fast and used so-so way. All project bundled by webpack, but argon-browser we include via script tag in index.html and use it via global window scope. And if you find good way, please notify me. Thank.
I just gave it a try, so what you need to do in the webpack.config, is the following:
base64-loader
module.rules
:
{
test: /\.wasm$/,
loader: "base64-loader",
type: "javascript/auto",
},
module
:
noParse: /\.wasm$/,
file-loader
(it's somewhere around module.rules[2].oneOf
) and add this to exclude
:
/\.wasm$/
so that it looks something like
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.wasm$/]
I assume @general-ice you were missing the last part, if it's not there, file-loader
externalizes all big scripts and it breaks, which generates the error you posted above.
@antelle that works! :tada: Thanks for looking into this!
Here's the full config that worked for me:
config.module.rules.push({
test: /\.wasm$/,
loader: "base64-loader",
type: "javascript/auto",
});
config.module.noParse = /\.wasm$/;
config.module.rules.forEach(rule => {
(rule.oneOf || []).forEach(oneOf => {
if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
oneOf.exclude.push(/\.wasm$/);
}
});
});
I found same issue and npm start
generates
./node_modules/argon2-browser/dist/argon2.wasm
Module parse failed: magic header not detected
File was processed with these loaders:
* ./node_modules/file-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
Error: magic header not detected
my change is as below.
$ cat config-overrides.js
config.module.rules.push({
test: /\.wasm$/,
loader: "base64-loader",
type: "javascript/auto",
});
config.module.noParse = /\.wasm$/;
config.module.rules.forEach(rule => {
(rule.oneOf || []).forEach(oneOf => {
if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
oneOf.exclude.push(/\.wasm$/);
}
});
});
$ cat src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
const argon2 = require('argon2-browser')
argon2.hash({ pass: 'password', salt: 'somesalt' })
.then(h => console.log(h.hash, h.hashHex, h.encoded))
.catch(e => console.error(e.message, e.code))
ReactDOM.render(document.getElementById('root'));
Can you please help me and point to where I could change?
I've figured out the problem. Latest push should be good.
Hi, you made a good job. I've found a problem with
create-react-app
and i hope you help me) When i try useargon2-browser
with my app, which was initialised fromcreate-react-app
. So thatcreate-react-app
has a only hide webpack config, i've usedreact-app-rewired
to customise it config. Problems: usageprocess: false
dont allowed in create-react-app, because some packadges depend from it, and also i common use theprocess
to acces env variables. If add your suggested config(withoutprocess
redefining), i have a error__webpack_public_path__ is not defined
. Example of problemcreate-react-app's
project bellow package.json:config-overrides.js:
usage:
Thanks in advance