Node_modules of generated React frontend cannot be installed with npm 7

[Mweydert]

On a newly created project with the generator, I am not able to install node_modules of a react frontend using npm 7.

result of npm i

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: typescript@4.3.2
npm ERR! node_modules/typescript
npm ERR!   typescript@"^4.0.3" from the root project
npm ERR!   peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0
npm ERR!   node_modules/tsutils
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/eslint-plugin@4.26.0
npm ERR!     node_modules/@typescript-eslint/eslint-plugin
npm ERR!       dev @typescript-eslint/eslint-plugin@"^4.12.0" from the root project
npm ERR!       2 more (react-scripts, @thetribe/eslint-config-typescript)
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/typescript-estree@4.26.0
npm ERR!     node_modules/@typescript-eslint/typescript-estree
npm ERR!       @typescript-eslint/typescript-estree@"4.26.0" from @typescript-eslint/parser@4.26.0
npm ERR!       node_modules/@typescript-eslint/parser
npm ERR!         dev @typescript-eslint/parser@"^4.12.0" from the root project
npm ERR!         3 more (@typescript-eslint/eslint-plugin, react-scripts, @thetribe/eslint-config-typescript)
npm ERR!       1 more (@typescript-eslint/experimental-utils)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1" from react-scripts@4.0.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"4.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/mweydert/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mweydert/.npm/_logs/2021-06-02T12_32_54_667Z-debug.log

npm 7 automatically try to install peer dependencies, which seems to cause issue be due to :

• Dependency typescript: "^4.0.3" in our package.json
• Dependency react-scripts@4.0.1 in our package.json, which has a peer dependency to typescript@"^3.2.1"

If I allow an upper minor version of react-scripts (i.e. react-scripts@^4.0.1) which is supposed to fix this error (facebook/create-react-app#9892), I got a new error with @babel/core module.

Result of npm i:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @babel/core@7.12.3
npm ERR! node_modules/@babel/core
npm ERR!   @babel/core@"7.12.3" from react-scripts@4.0.3
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"^4.0.1" from the root project
npm ERR!   @babel/core@"^7.12.3" from @svgr/webpack@5.5.0
npm ERR!   node_modules/@svgr/webpack
npm ERR!     @svgr/webpack@"5.5.0" from react-scripts@4.0.3
npm ERR!     node_modules/react-scripts
npm ERR!       react-scripts@"^4.0.1" from the root project
npm ERR!   9 more (babel-jest, babel-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @babel/core@"^7.13.0" from @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.13.12
npm ERR! node_modules/@babel/preset-env/node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining
npm ERR!   @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@"^7.13.12" from @babel/preset-env@7.14.4
npm ERR!   node_modules/@babel/preset-env
npm ERR!     @babel/preset-env@"^7.12.1" from @svgr/webpack@5.5.0
npm ERR!     node_modules/@svgr/webpack
npm ERR!       @svgr/webpack@"5.5.0" from react-scripts@4.0.3
npm ERR!       node_modules/react-scripts
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/mweydert/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mweydert/.npm/_logs/2021-06-02T12_40_21_266Z-debug.log

This seems to be an issue in dependencies of react-scripts 4.0.3 itself:

• react-scripts@4.0.3 requires `@babel/core@7.12.3``
• react-scripts@4.0.3 requires @svgr/webpack@5.5.0, which requires @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@"^7.13.12" from @babel/preset-env@7.14.4, which requires @babel/core@"^7.13.0"

[Mweydert]

Follow analysis, it seems to be in progress in react-scripts repository (facebook/create-react-app#10797) and should be available in a next minor version.

Meanwhile, a workaround is to :

• Allow changes in minor version of react-scripts in our package.json
• Explicitly specifiy a version of @babel/core:^7.12.0 in our package.json (https://www.gitmemory.com/issue/facebook/create-react-app/10738/807720421)