Skip to content

Commit

Permalink
added webpack 5 create-react-app instructions (#4670)
Browse files Browse the repository at this point in the history
* added webpack 5 create-react-app instructions

* cleaning up readme

* updating readme
  • Loading branch information
luu-alex committed Jan 10, 2022
1 parent 8783f4d commit 9b19af8
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 1 deletion.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
77 changes: 77 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 9b19af8

Please sign in to comment.