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

merceyz · 2020-10-23T20:00:45Z

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 · 2020-10-23T20:00:55Z

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 cla@fb.com. Thanks!

facebook-github-bot · 2020-10-23T20:37:41Z

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

packages/react-scripts/package.json

arcanis · 2020-11-11T15:35:07Z

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

iansu · 2021-01-06T19:08:23Z

@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 · 2021-01-06T21:29:12Z

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.

This reverts commit 5c6106b.

merceyz · 2021-01-13T19:04:31Z

@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 · 2021-01-13T23:08:19Z

@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.

* Fix noFallthroughCasesInSwitch/jsx object is not extensible (facebook#9921) Co-authored-by: Konstantin Simeonov <kon.simeonov@protonmail.com> * Add logo license to README * Remove trailing space in reportWebVitals.ts (facebook#10040) * docs: add React Testing Library as a library requiring jsdom (facebook#10052) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Increase Workbox's maximumFileSizeToCacheInBytes (facebook#10048) * Create FUNDING.yml * replace inquirer with prompts (facebook#10083) - remove `react-dev-utils/inquirer` public import * Prepare 4.0.1 release * Prepare 4.0.1 release * Publish - cra-template-typescript@1.1.1 - cra-template@1.1.1 - create-react-app@4.0.1 - react-dev-utils@11.0.1 - react-scripts@4.0.1 * chore: bump web-vital dependency version (facebook#10143) * chore: bump typescript version (facebook#10141) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Add TypeScript 4.x as peerDependency to react-scripts(facebook#9964) * remove chalk from formatWebpackMessages (facebook#10198) * Upgrade @svgr/webpack to fix build error (facebook#10213) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Improve vendor chunk names in development (facebook#9569) * Update postcss packages (facebook#10003) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Recovered some integration tests (facebook#10091) * Upgrade sass-loader (facebook#9988) * Move ESLint cache file into node_modules (facebook#9977) Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> * Revert "Update postcss packages" (facebook#10216) This reverts commit 580ed5d. * Remove references to Node 8 (facebook#10214) * fix(react-scripts): add missing peer dependency react and update react-refresh-webpack-plugin (facebook#9872) * Update using-the-public-folder.md (facebook#10314) Some library --> Some libraries * docs: add missing override options for Jest config (facebook#9473) * Fix CI tests (facebook#10217) * appTsConfig immutability handling by immer (facebook#10027) Co-authored-by: mad-jose <joset@yeswearemad.com> * Add support for new BUILD_PATH advanced configuration variable (facebook#8986) * Add opt-out for eslint-webpack-plugin (facebook#10170) * Prepare 4.0.2 release * Publish - cra-template-typescript@1.1.2 - cra-template@1.1.2 - create-react-app@4.0.2 - react-dev-utils@11.0.2 - react-error-overlay@6.0.9 - react-scripts@4.0.2 * tests: update test case to match the description (facebook#10384) * Bump webpack-dev-server 3.11.0 -> 3.11.1 (facebook#10312) Resolves facebook#10084 security vulnerability in websocket-driver library version 0.5.6, imported transitively by sockjs * Upgrade eslint-webpack-plugin to fix opt-out flag (facebook#10590) * update immer to 8.0.1 to address vulnerability (facebook#10412) Resolves facebook#10411 Bumps immer version to 8.0.1 to address the prototype pollution vulnerability with the current 7.0.9 version. * Prepare 4.0.3 release * Update CHANGELOG * Publish - create-react-app@4.0.3 - react-dev-utils@11.0.3 - react-scripts@4.0.3 Co-authored-by: Ryota Murakami <dojce1048@gmail.com> Co-authored-by: Konstantin Simeonov <kon.simeonov@protonmail.com> Co-authored-by: Ian Sutherland <ian@iansutherland.ca> Co-authored-by: sho90 <aznecosann@gmail.com> Co-authored-by: Anyul Rivas <anyulled@gmail.com> Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> Co-authored-by: Jeffrey Posnick <jeffy@google.com> Co-authored-by: Evan Bacon <baconbrix@gmail.com> Co-authored-by: Sahil Purav <sahil5684@gmail.com> Co-authored-by: Hakjoon Sim <trainto@gmail.com> Co-authored-by: Chris Shepherd <chris@chrisshepherd.me> Co-authored-by: Jason Williams <936006+jasonwilliams@users.noreply.github.com> Co-authored-by: Jabran Rafique⚡️ <jabranr@users.noreply.github.com> Co-authored-by: John Ruble <johnruble@gmail.com> Co-authored-by: Morten N.O. Nørgaard Henriksen <morten.n.o.henriksen@icloud.com> Co-authored-by: Sergey Makarov <serega.s.makar@gmail.com> Co-authored-by: EhsanKhaki <ehsankhfr@gmail.com> Co-authored-by: Kristoffer K <merceyz@users.noreply.github.com> Co-authored-by: Aviv Hadar <Avivhdr@gmail.com> Co-authored-by: Tobias Büschel <13087421+tobiasbueschel@users.noreply.github.com> Co-authored-by: mad-jose <44253495+josezone@users.noreply.github.com> Co-authored-by: mad-jose <joset@yeswearemad.com> Co-authored-by: Andrew Hyndman <ajhyndman@hotmail.com> Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com> Co-authored-by: James George <jamesgeorge998001@gmail.com> Co-authored-by: Dion Woolley <woolley.dion@gmail.com> Co-authored-by: Walker Clem <51654951+wclem4@users.noreply.github.com>

…t-refresh-webpack-plugin (facebook#9872)

benderillo · 2022-10-04T01:51:59Z

@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?

…t-refresh-webpack-plugin (facebook#9872)

merceyz requested review from ianschmitz, iansu, mrmckeb and petetnt as code owners October 23, 2020 20:00

merceyz marked this pull request as draft October 23, 2020 20:00

merceyz changed the title ~~fix(react-scripts): add missing peer dependency react~~ fix(react-scripts): add missing peer dependency react and update react-refresh-webpack-plugin Oct 23, 2020

facebook-github-bot added the CLA Signed label Oct 23, 2020

This was referenced Oct 29, 2020

CI Failure: examples-v2-yarn-2 storybookjs/storybook#12928

Closed

Module not found: Can't resolve 'react-refresh/runtime' in create-react-app v4 pnpm/pnpm#2957

Closed

merceyz marked this pull request as ready for review November 2, 2020 00:03

merceyz commented Nov 2, 2020

View reviewed changes

packages/react-scripts/package.json Outdated Show resolved Hide resolved

poteirard mentioned this pull request Nov 7, 2020

Dev server crashes with react-scripts v4 styleguidist/react-styleguidist#1705

Closed

This was referenced Nov 8, 2020

fix: add react-refresh as a dependency for templates #9671

Closed

ci: fix PnP e2e test storybookjs/storybook#13059

Closed

iansu mentioned this pull request Nov 11, 2020

Meeting - 11/25/2020 iansu/create-react-app-meta#45

Closed

21 tasks

iansu added the tag: bug fix label Nov 11, 2020

iansu added this to the 4.0.1 milestone Nov 11, 2020

iansu modified the milestones: 4.0.1, 4.0.2 Nov 23, 2020

merceyz mentioned this pull request Nov 24, 2020

ESLint yarnpkg/berry#8

Open

merceyz added 4 commits December 8, 2020 18:37

fix(react-scripts): add missing peer dependency react

e444c85

fix(template): add missing dependency eslint-config-react-app

5c6106b

chore: update react-refresh-webpack-plugin

e291b4a

chore: loosen react peer version

7c998dc

merceyz force-pushed the merceyz/dependency-issues branch from 48dd151 to 7c998dc Compare December 8, 2020 17:39

arcanis mentioned this pull request Dec 13, 2020

Adds an extension for CRA yarnpkg/berry#2236

Merged

3 tasks

merceyz mentioned this pull request Dec 16, 2020

Docs lack how to uninstall Yarn 2 yarnpkg/berry#2244

Closed

merceyz mentioned this pull request Dec 23, 2020

Bump @pmmmwh/react-refresh-webpack-plugin version #10247

Closed

merceyz mentioned this pull request Jan 5, 2021

Error migrating to Yarn 2 #10002

Open

arcanis mentioned this pull request Jan 6, 2021

Meeting - 1/6/2021 iansu/create-react-app-meta#47

Closed

21 tasks

merceyz mentioned this pull request Jan 10, 2021

4.0.0-next.77 sample app yields "Module not found: Your application tried to access react-refresh" when started with Yarn 2 #9446

Closed

hong6316 mentioned this pull request Jan 11, 2021

PLAT-129601: Upgrade react-refresh-webpack-plugin 0.3.3 to 0.4.3 enactjs/cli#231

Merged

Revert "fix(template): add missing dependency eslint-config-react-app"

663316a

This reverts commit 5c6106b.

iansu merged commit a504e9d into facebook:master Jan 13, 2021

merceyz deleted the merceyz/dependency-issues branch January 13, 2021 23:56

merceyz mentioned this pull request Jan 19, 2021

New JSX support detection does not work with Yarn 2 PnP #10363

Closed

drich7449 mentioned this pull request Feb 23, 2021

[Snyk] Security upgrade react-dev-utils from 9.1.0 to 11.0.3 drich7449/create-react-app#22

Open

hzhz mentioned this pull request Feb 23, 2021

[Snyk] Security upgrade react-dev-utils from 10.2.1 to 11.0.3 hzhz/create-react-app#15

Open

sirinartk mentioned this pull request Feb 23, 2021

[Snyk] Security upgrade react-dev-utils from 9.1.0 to 11.0.3 sirinartk/create-react-app#17

Closed

wombleton pushed a commit to AurorNZ/create-react-app that referenced this pull request Jun 1, 2021

fix(react-scripts): add missing peer dependency react and update reac…

6ca9749

…t-refresh-webpack-plugin (facebook#9872)

abhiisheek pushed a commit to abhiisheek/create-react-app that referenced this pull request May 19, 2023

fix(react-scripts): add missing peer dependency react and update reac…

c1fa699

…t-refresh-webpack-plugin (facebook#9872)

abhiisheek pushed a commit to abhiisheek/create-react-app that referenced this pull request May 24, 2023

fix(react-scripts): add missing peer dependency react and update reac…

cee0bd1

…t-refresh-webpack-plugin (facebook#9872)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

merceyz commented Oct 23, 2020 •

edited

facebook-github-bot commented Oct 23, 2020

facebook-github-bot commented Oct 23, 2020

arcanis commented Nov 11, 2020

iansu commented Jan 6, 2021

arcanis commented Jan 6, 2021

merceyz commented Jan 13, 2021

iansu commented Jan 13, 2021

benderillo commented Oct 4, 2022

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

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

Conversation

merceyz commented Oct 23, 2020 • edited

facebook-github-bot commented Oct 23, 2020

facebook-github-bot commented Oct 23, 2020

arcanis commented Nov 11, 2020

iansu commented Jan 6, 2021

arcanis commented Jan 6, 2021

Peer deps

Require.resolve

merceyz commented Jan 13, 2021

iansu commented Jan 13, 2021

benderillo commented Oct 4, 2022

merceyz commented Oct 23, 2020 •

edited