added webpack 5 create-react-app instructions

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)
+- Fix a typo in the documentation for `methods.myMethod.send` (#4599)
+- Updated README to include Webpack 5 create-react-app support instructions (#4173)

README.md

@@ -103,6 +103,106 @@ 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 polyfills are not included in the latest version of create-react-app.
+
+### Solution
+
+
+- Install react-app-rewired
+
+If you are using yarn:
+```bash
+yarn add --dev react-app-rewired
+```
+
+If you are using npm:
+```bash
+npm install --save-dev react-app-rewired
+```
+
+- Create `config-overrides.js` in the root of your project folder with the content:
+
+```javascript
+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;
+
+ return config;
+}
+```
+
+
+- Install the missing modules
+
+If you are using yarn:
+```bash
+yarn add --dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url
+```
+If you are using npm:
+```bash
+npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url
+```
+
+- Create the file `polyfill.js` in the src folder and in the file add:
+
+```javascript
+import { Buffer } from 'buffer';
+
+window.global = window;
+global.Buffer = Buffer;
+global.process = {
+ env: { DEBUG: undefined },
+ version: '',
+ nextTick: require('next-tick')
+};
+```
+
+- In `index.js` , import `polyfill.js` before `web3`:
+```javascript
+import './polyfill.js';
+import Web3 from 'web3';
+```
+
+- Within `package.json` change the scripts field, 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",
+ ...
+```
+
+after:
+```typescript
+"scripts": {
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test",
+ ...
+```
+
+The missing 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