fix(react-scripts): add missing peer dependency react and update react-refresh-webpack-plugin

[merceyz]

What's the problem this PR addresses?

• react-scripts has a missing peer dependency on react
• react-scripts depends on a version of @pmmmwh/react-refresh-webpack-plugin which doesn't resolve the imports it injects causing projects to rely on hoisting to bring react-refresh to the root node_modules folder which is not guaranteed.
• The templates lack a dependency on eslint-config-react-app making it also rely on hoisting.
  Delayed for another time

Read https://yarnpkg.com/advanced/rulebook#packages-should-only-ever-require-what-they-formally-list-in-their-dependencies for more in depth information about hoisting.

Fixes https://github.com/yarnpkg/berry/runs/1299440256#step:5:132
Fixes #9446
Fixes pnpm/pnpm#2957
Closes #9671

How did you fix it?

• Add a peer dependency on react
• Add eslint-config-react-app as a dependency in the templates
  Delayed for another time
• Update @pmmmwh/react-refresh-webpack-plugin to get fix: resolve react-refresh/runtime to an absolute path pmmmwh/react-refresh-webpack-plugin#230 (cc @pmmmwh)

[facebook-github-bot]

Hi @merceyz!

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.

In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[arcanis]

Ping @iansu? It causes both our CRA and Storybook tests to fail, which decreases our coverage

[iansu]

@arcanis @merceyz we discussed this issue in the maintainers meeting today. In general we're fine with this change. Adding the react peer dependency and the dependency on @pmmmwh/react-refresh-webpack-plugin in react-scripts is no problem.

The eslint-config-react-app one is a bit problematic though. If we were to include it in the template and someone created a new project the versions would match in react-scripts and their project. But if they later updated react-scripts (which is how we recommend people upgrade) then the versions would no longer match. The ESLint config also has a number of peer dependencies which might have to be added to the template and we'd like to avoid that.

We are open to ideas on how to make this work.

[arcanis]

Awesome, thanks 🙏

The eslint-config-react-app one is a bit problematic though. [...] We are open to ideas on how to make this work.

Understandable. I can see two alternatives, what do you think?:

Peer deps

• move the eslint configuration into react-scripts (for instance react-scripts/eslint.js)
• add a peer dependency on react-scripts to eslint-config-react-app
• turn eslint-config-react-app into module.exports = require('react-scripts/eslint')
• add eslint-config-react-app as dependency on the template

Require.resolve

• add a react-scripts/eslint-config.js like this: module.exports = require.resolve('eslint-config-react-app')
• rename the template .eslintrc.json into .eslintrc.js
• turn ["react-app"] into [require('react-scripts/eslint-config')]

Note that we can also do a bit of both: move eslint-config-react-app inside react-scripts and use the exported require.resolve trick to provide the right path to the eslintrc.

[merceyz]

@iansu Alright, I've reverted the eslint changes so that can be tackled in a seperate PR to allow the other changes to be merged

[iansu]

@merceyz Thanks!

@arcanis I'm discussing these options with the other maintainers to see what they think. I don't think we want to move the ESLint config into react-scripts though because it is used on its own in other projects.

[benderillo]

@iansu @arcanis
This is probably an old thread but I don't know where to start digging and it is the end of 2022 but people are still having troubles with new yarn and create-react-app.

Here is the problem:
running yarn create react-app my-app with latest yarn (say v3.2.3) creates an app that is not in working state.
Try to run it and make any changes and you get an error that "react-app" eslint extension is not found.

So far the most sensible workaround was to install eslint-config-react-app and modifying .yarnrc.yml to explicitly tell react-scripts to use it. Like explained here: #10463 (comment)

It works but the fact that people have to google for a solution is wrong: not everyone will find it, others will find wrong solutions, etc.

I am a bit puzzled what happened with the discussion here about eslint-config-react-app.

• Is there a plan to solve it officially so users won't have to scratch their heads figuring it out on their own?
• Perhaps there is a documentation update needed to reflect the current "broken" state of things?