Yarn: `yarn upgrade react@next` breaks webpack bundling, peer dependencies

[Connorelsea]

Do you want to request a feature or report a bug?

Bug

Behavior and how to reproduce:

Bug. When running yarn upgrade react@next to install react version 16 beta 1, multiple packages that are dependencies of the repository suddenly have react as a dependency in their personal node modules even though react is specified as a peer dependency and not a direct dependency of these packages. This creates huge size increase in the webpack bundle due to each child package having its own react.

This does not occur under NPM when deleting the lockfile and running npm install instead of yarn

See this thread for more context and exact photographs of the analyzer tool observing the output of the webpack bundle on prod build. https://twitter.com/Connorelsea/status/890606030467473408

Please mention your node.js, yarn and operating system version.

Mac OS High Sierra
Yarn 0.24.6
NPM 5.3.0
Node 8.0.0

[BYK]

Please provide a complete and minimal package.json file so we can reproduce and investigate.

[Connorelsea]

Using create-react-app newapp and then yarn upgrade react@next react-dom@next

[Connorelsea]

This problem persists on beta 5. Here is a package.json file. https://gist.github.com/Connorelsea/ace2a2b5c066f96978237aba456960f8

Here is a visual demonstration of the sub-reacts. https://twitter.com/Connorelsea/status/899680550482477056

Building using npm install instead of yarn results in the following decrease in size, but seemingly errors on running the build.

[BYK]

@Connorelsea this seems to be due to dependencies requiring React with the ^15.0.0 semver range which would be incompatible with any 16.x.x version. May be you we can force them to use 16 with selective version resolutions (https://github.com/yarnpkg/yarn/pull/4105). What do you think?

[gaearon]

I narrowed it down.
If you run this with Yarn 0.24:

{
  "dependencies": {
    "react": "16.0.0-rc.2",
    "react-datepicker": "0.52.0"
  },
  "devDependencies": {
    "webpack-visualizer-plugin": "0.1.11"
  }
}

You're going to get an extra React in node_modules/react-datepicker/node_modules.

However if you remove webpack-visualizer-plugin (a devDependency!), everything is okay.

This seems to already be fixed at least as of 0.28 (probably earlier) but it would be great if we had an integration test for this bug.

[BYK]

Thanks a lot for the detective work @gaearon!

I've filed #4364 to track the continuous integration tests idea and closing this one since it is resolved as of latest master.