Hi, you made a good job. I've found a problem with create-react-app and i hope you help me)
When i try use argon2-browser with my app, which was initialised from create-react-app. So that create-react-app has a only hide webpack config, i've used react-app-rewired to customise it config. Problems: usage process: false dont allowed in create-react-app, because some packadges depend from it, and also i common use the process to acces env variables. If add your suggested config(without process redefining), i have a error __webpack_public_path__ is not defined. Example of problem create-react-app's project bellow
package.json:
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"argon2-browser": "^1.12.0",
"react": "^16.12.0",
"react-app-rewired": "^2.1.5",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
},
"scripts": {
"start": "react-app-rewired start"
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"base64-loader": "^1.0.0"
}
}
config-overrides.js:
module.exports = {
webpack: function(config, env) {
config.module = {
...config.module,
noParse: [/\.wasm$/],
rules: [
...config.module.rules,
{
test: /\.wasm$/,
type: 'javascript/auto',
loaders: ['base64-loader']
}
]
}
config.node = {
...config.node,
__dirname: false,
fs: 'empty',
Buffer: false,
};
return config
}
}
usage:
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(Hello
, document.getElementById('root'));
Thanks in advance
Hi, you made a good job. I've found a problem with
create-react-appand i hope you help me)When i try use
argon2-browserwith my app, which was initialised fromcreate-react-app. So thatcreate-react-apphas a only hide webpack config, i've usedreact-app-rewiredto customise it config. Problems: usageprocess: falsedont allowed in create-react-app, because some packadges depend from it, and also i common use theprocessto acces env variables. If add your suggested config(withoutprocessredefining), i have a error__webpack_public_path__ is not defined. Example of problemcreate-react-app'sproject bellowpackage.json:
{ "name": "myapp", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.4.0", "@testing-library/user-event": "^7.2.1", "argon2-browser": "^1.12.0", "react": "^16.12.0", "react-app-rewired": "^2.1.5", "react-dom": "^16.12.0", "react-scripts": "3.3.0" }, "scripts": { "start": "react-app-rewired start" }, "eslintConfig": { "extends": "react-app" }, "devDependencies": { "base64-loader": "^1.0.0" } }config-overrides.js:
module.exports = { webpack: function(config, env) { config.module = { ...config.module, noParse: [/\.wasm$/], rules: [ ...config.module.rules, { test: /\.wasm$/, type: 'javascript/auto', loaders: ['base64-loader'] } ] } config.node = { ...config.node, __dirname: false, fs: 'empty', Buffer: false, }; return config } }usage:
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(Hello , document.getElementById('root'));
Thanks in advance