diff --git a/CHANGELOG.md b/CHANGELOG.md index 182437c18f0..96ee3c40ef9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -496,4 +496,5 @@ Released with 1.0.0-beta.37 code base. ## [1.7.1] ### Fixed -- Fix a typo in the documentation for `methods.myMethod.send` (#4599) \ No newline at end of file +- Fix a typo in the documentation for `methods.myMethod.send` (#4599) +- Updated README to include Webpack 5 create-react-app support instructions (#4173) \ No newline at end of file diff --git a/README.md b/README.md index 74d518f98fa..525abb92dd9 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,83 @@ If you are using the types in a `commonjs` module, like in a Node app, you just ## Trouble shooting and known issues. +### Web3 and Create-react-app + +If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app. + +### Solution + + +- Install react-app-rewired and the missing modules + +If you are using yarn: +```bash +yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer +``` + +If you are using npm: +```bash +npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process +``` + +- Create `config-overrides.js` in the root of your project folder with the content: + +```javascript +const webpack = require('webpack'); + +module.exports = function override(config) { + const fallback = config.resolve.fallback || {}; + Object.assign(fallback, { + "crypto": require.resolve("crypto-browserify"), + "stream": require.resolve("stream-browserify"), + "assert": require.resolve("assert"), + "http": require.resolve("stream-http"), + "https": require.resolve("https-browserify"), + "os": require.resolve("os-browserify"), + "url": require.resolve("url") + }) + config.resolve.fallback = fallback; + config.plugins = (config.plugins || []).concat([ + new webpack.ProvidePlugin({ + process: 'process/browser', + Buffer: ['buffer', 'Buffer'] + }) + ]) + return config; +} +``` + +- Within `package.json` change the scripts field for start, build and test. Instead of `react-scripts` replace it with `react-app-rewired` + +before: +```typescript +"scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" +}, +``` + +after: +```typescript +"scripts": { + "start": "react-app-rewired start", + "build": "react-app-rewired build", + "test": "react-app-rewired test", + "eject": "react-scripts eject" +}, +``` + +The missing Nodejs polyfills should be included now and your app should be functional with web3. +- If you want to hide the warnings created by the console: + +In `config-overrides.js` within the `override` function, add: + +```javascript +config.ignoreWarnings = [/Failed to parse source map/]; +``` + ### Web3 and Angular ### New solution