jsusen
June 19, 2022, 1:24pm
1
rect-scripts should be upgraded to the next major version so that other packeges can be upgraded too.
jsusen
August 18, 2022, 8:16am
3
This is a problem. A lot of errors after the upgrade. At least some are related to this:
opened 12:59AM - 15 Dec 21 UTC
issue: bug report
### Describe the bug
Compiled with problems
### Did you try recovering you… r dependencies?
```
yarn --version
1.22.15
```
### Which terms did you search for in User Guide?
react-scripts 5 webpack Module not found: Error: Can't resolve 'fs'
### Environment
npx create-react-app --info
Environment Info:
```
current version of create-react-app: 5.0.0
running from /Users/xxx/.config/yarn/global/node_modules/create-react-app
System:
OS: macOS 12.0.1
CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Binaries:
Node: 16.13.0 - /usr/local/Cellar/node@16/16.13.0/bin/node
Yarn: 1.22.15 - /usr/local/bin/yarn
npm: 8.1.0 - /usr/local/Cellar/node@16/16.13.0/bin/npm
Browsers:
Chrome: 96.0.4664.93
Edge: Not Found
Firefox: 94.0.1
Safari: 15.1
npmPackages:
react: 17.0.2
react-dom: 17.0.2
react-scripts: 5.0.0
npmGlobalPackages:
create-react-app: Not Found
```
### Steps to reproduce
In a project with react-scripts v5.0.0
1. yarn add -D dotenv
2. yarn start
### Expected behavior
### Actual behavior
```
ERROR in ../../node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs' in '../node_modules/dotenv/lib'
@ ./src/config.ts 5:0-28 8:0-13
@ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60
ERROR in ../../node_modules/dotenv/lib/main.js 26:13-28
Module not found: Error: Can't resolve 'path' in '../node_modules/dotenv/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./src/config.ts 5:0-28 8:0-13
@ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60
ERROR in ../../node_modules/dotenv/lib/main.js 28:11-24
Module not found: Error: Can't resolve 'os' in '../node_modules/dotenv/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
@ ./src/config.ts 5:0-28 8:0-13
@ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60
3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
```
Some useful comments:
> * [dependency aliases](https://github.com/facebook/create-react-app/issues/11756#issuecomment-998418988)
> * [`react-app-rewired` config](https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001130053)
> * [`@craco/craco` config ](https://github.com/facebook/create-react-app/issues/11756#issuecomment-1001769356)
> * [hacking `react-scripts` with `patch-package`](https://github.com/facebook/create-react-app/issues/11756#issuecomment-1002637667)
In short the problem is that webpack used to inclued polyfills for packages that are not intended to be used in the browser. These “node” packeges can be no longer included in the create react app projects.
This issue will likely never be fixed. Suggestions from the thread:
remove dependencies on js packages intended for node (official)
eject and add the polyfills to the webpack config
use react-app-rewired which allows to edit the config without ejecting. This sounds good until you read their readme which states:By doing this you're breaking the "guarantees" that CRA provides. That is to say you now "own" the configs. No support will be provided. Proceed with caution.
switch to vite, next.js or some other tool
jsusen
August 19, 2022, 7:17am
4
There is one package causing the polyfill problem: safe-buffer
jsonwebtoken (probably redundant)
oidc-client this is a real problem
washi
August 19, 2022, 9:30am
5
oidc-client is not maintained anymore, it is replaced by oidc-client-ts . It might solve the dependency issue.
jsusen
September 14, 2022, 1:12pm
9
Front end tooling was changed to VITE.
production build was located in build folder, now it is in dist
Development implications:
to start development server run yarn dev
css classes don’t contain their parent component names. This should be fixed in a future pull request.