From 6927da34b13d01ff5618e677884a473f4afd3a55 Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 6 Jan 2022 13:08:28 -0500 Subject: [PATCH 1/3] added webpack 5 create-react-app instructions --- CHANGELOG.md | 3 +- README.md | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 1 deletion(-) 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..f31173e2830 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,101 @@ 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 + +1. Install react-app-rewired + +If you are using yarn: +``` +yarn add --dev react-app-rewired +``` + +If you are using npm: +``` +npm install --save-dev react-app-rewired +``` + +2. Create `config-overrides.js` in the root of your project folder with the content: + +``` +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; +} +``` + +3. Install the missing modules + +If you are using yarn: +``` +yarn add --dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url +``` +If you are using npm: +``` +npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url +``` + +4. Create the file `polyfill.js` in the src folder and in the file add: + +``` +import { Buffer } from 'buffer'; + +window.global = window; +global.Buffer = Buffer; +global.process = { + env: { DEBUG: undefined }, + version: '', + nextTick: require('next-tick') +}; +``` + +5. In `index.js` , import `polyfill.js` before `web3`: +``` +import './polyfill.js'; +import Web3 from 'web3'; +``` + +6. Within `package.json` change the scripts field: +replace +``` +"scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test" + } +``` +with +``` +"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` add: + +`config.ignoreWarnings = [/Failed to parse source map/];` + + ### Web3 and Angular ### New solution From a5f51c77b83319fd66ff6a0e43e964f67ff16559 Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 6 Jan 2022 22:58:15 -0500 Subject: [PATCH 2/3] cleaning up readme --- README.md | 57 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 31 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index f31173e2830..afc9a03a295 100644 --- a/README.md +++ b/README.md @@ -109,21 +109,22 @@ If you are using create-react-app version >=5 you may run into issues building. ### Solution -1. Install react-app-rewired + +- 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 ``` -2. Create `config-overrides.js` in the root of your project folder with the content: +- 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, { @@ -141,20 +142,21 @@ module.exports = function override(config) { } ``` -3. Install the missing modules + +- 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 ``` -4. Create the file `polyfill.js` in the src folder and in the file add: +- Create the file `polyfill.js` in the src folder and in the file add: -``` +```javascript import { Buffer } from 'buffer'; window.global = window; @@ -166,37 +168,40 @@ global.process = { }; ``` -5. In `index.js` , import `polyfill.js` before `web3`: -``` +- In `index.js` , import `polyfill.js` before `web3`: +```javascript import './polyfill.js'; import Web3 from 'web3'; ``` -6. Within `package.json` change the scripts field: -replace -``` +- 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" - } -``` -with + "test": "react-scripts test", + ... ``` + +after: +```typescript "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", - "test": "react-app-rewired test" - } + "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` add: +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: -`config.ignoreWarnings = [/Failed to parse source map/];` +In `config-overrides.js` within the `override` function, add: +```javascript +config.ignoreWarnings = [/Failed to parse source map/];` +``` ### Web3 and Angular From de4fc082dfa8ce7aa07994f439e7b3a8116d96d0 Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 7 Jan 2022 17:10:08 -0500 Subject: [PATCH 3/3] updating readme --- README.md | 61 +++++++++++++++++-------------------------------------- 1 file changed, 19 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index afc9a03a295..525abb92dd9 100644 --- a/README.md +++ b/README.md @@ -105,26 +105,28 @@ If you are using the types in a `commonjs` module, like in a Node app, you just ### 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. +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 +- Install react-app-rewired and the missing modules If you are using yarn: ```bash -yarn add --dev react-app-rewired +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 +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, { @@ -137,44 +139,17 @@ module.exports = function override(config) { "url": require.resolve("url") }) config.resolve.fallback = fallback; - + config.plugins = (config.plugins || []).concat([ + new webpack.ProvidePlugin({ + process: 'process/browser', + Buffer: ['buffer', 'Buffer'] + }) + ]) 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` +- Within `package.json` change the scripts field for start, build and test. Instead of `react-scripts` replace it with `react-app-rewired` before: ```typescript @@ -182,7 +157,8 @@ before: "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", - ... + "eject": "react-scripts eject" +}, ``` after: @@ -191,16 +167,17 @@ after: "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", - ... + "eject": "react-scripts eject" +}, ``` -The missing polyfills should be included now and your app should be functional with web3. +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/];` +config.ignoreWarnings = [/Failed to parse source map/]; ``` ### Web3 and Angular