Broken Build (Bad Internal Dependencies?)

After upgrading to @material-ui/core@npm:5.0.0-alpha.17 my minimum working example fails to build.

• The issue is present in the latest release. (technically the alpha release)
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I run yarn run build (version berry) in a React application with only a <Box /> element and my build breaks with the following output:

➜  app3 git:(main) ✗ yarn run build
[webpack-cli] Compilation finished
asset bundle.js 1.26 MiB [emitted] (name: main)
asset ./index.html 217 bytes [emitted]
orphan modules 170 KiB [orphan] 92 modules
runtime modules 931 bytes 4 modules
cacheable modules 1.06 MiB
  modules by path ./.yarn/$$virtual/ 942 KiB
    modules by path ./.yarn/$$virtual/@material-ui-core-virtual-b4e36a737f/0/cache/@material-ui-core-npm-5.0.0-alpha.17-5d57e841a9-bb8c85bd0e.zip/node_modules/@material-ui/core/ 43.3 KiB 23 modules
    modules by path ./.yarn/$$virtual/@material-ui-system-virtual-9915f411b1/0/cache/@material-ui-system-npm-5.0.0-alpha.17-bee0070a64-a60decd5cb.zip/node_modules/@material-ui/system/esm/*.js 21.3 KiB 18 modules
    modules by path ./.yarn/$$virtual/react-dom-virtual-e0a7765833/0/cache/react-dom-npm-17.0.1-588d0088ca-6a70028fbe.zip/node_modules/react-dom/ 875 KiB 2 modules
    3 modules
  modules by path ./.yarn/cache/ 139 KiB 16 modules
  ./src/index.js 301 bytes [built] [code generated]

WARNING in ./.yarn/$$virtual/@material-ui-core-virtual-b4e36a737f/0/cache/@material-ui-core-npm-5.0.0-alpha.17-5d57e841a9-bb8c85bd0e.zip/node_modules/@material-ui/core/styles/experimentalStyled.js 68:32-38
export 'default' (imported as 'styled') was not found in '@material-ui/styled-engine' (possible exports: )
 @ ./.yarn/$$virtual/@material-ui-core-virtual-b4e36a737f/0/cache/@material-ui-core-npm-5.0.0-alpha.17-5d57e841a9-bb8c85bd0e.zip/node_modules/@material-ui/core/Box/Box.js 7:0-50 98:15-21
 @ ./.yarn/$$virtual/@material-ui-core-virtual-b4e36a737f/0/cache/@material-ui-core-npm-5.0.0-alpha.17-5d57e841a9-bb8c85bd0e.zip/node_modules/@material-ui/core/Box/index.js 1:0-32 1:0-32
 @ ./src/index.js 5:0-40 6:50-53

ERROR in ./.yarn/$$virtual/@material-ui-styled-engine-virtual-86fc2e9b6c/0/cache/@material-ui-styled-engine-npm-5.0.0-alpha.16-44bcbbc6f6-97205f1e3e.zip/node_modules/@material-ui/styled-engine/index.js 6:0-42
Module not found: Error: @material-ui/styled-engine tried to access @emotion/styled (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

Required package: @emotion/styled (via "@emotion/styled")
Required by: @material-ui/styled-engine@virtual:b4e36a737f59a54ff561a786e80fd8ae19189fa5f5741c703643adc44d2b68b22037e1aa4403259efefa8e3610fd6a6ed2e4231a5a0f03cc0c5228882352be50#npm:5.0.0-alpha.16 (via /home/john/Downloads/repos/app3/.yarn/$$virtual/@material-ui-styled-engine-virtual-86fc2e9b6c/0/cache/@material-ui-styled-engine-npm-5.0.0-alpha.16-44bcbbc6f6-97205f1e3e.zip/node_modules/@material-ui/styled-engine/)
Ancestor breaking the chain: app@workspace:.


 @ ./.yarn/$$virtual/@material-ui-core-virtual-b4e36a737f/0/cache/@material-ui-core-npm-5.0.0-alpha.17-5d57e841a9-bb8c85bd0e.zip/node_modules/@material-ui/core/styles/experimentalStyled.js 3:0-48 68:32-38
 @ ./.yarn/$$virtual/@material-ui-core-virtual-b4e36a737f/0/cache/@material-ui-core-npm-5.0.0-alpha.17-5d57e841a9-bb8c85bd0e.zip/node_modules/@material-ui/core/Box/Box.js 7:0-50 98:15-21
 @ ./.yarn/$$virtual/@material-ui-core-virtual-b4e36a737f/0/cache/@material-ui-core-npm-5.0.0-alpha.17-5d57e841a9-bb8c85bd0e.zip/node_modules/@material-ui/core/Box/index.js 1:0-32 1:0-32
 @ ./src/index.js 5:0-40 6:50-53

ERROR in ./.yarn/$$virtual/@material-ui-styled-engine-virtual-86fc2e9b6c/0/cache/@material-ui-styled-engine-npm-5.0.0-alpha.16-44bcbbc6f6-97205f1e3e.zip/node_modules/@material-ui/styled-engine/index.js 7:0-46
Module not found: Error: @material-ui/styled-engine tried to access @emotion/react (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound.

Required package: @emotion/react (via "@emotion/react")
Required by: @material-ui/styled-engine@virtual:b4e36a737f59a54ff561a786e80fd8ae19189fa5f5741c703643adc44d2b68b22037e1aa4403259efefa8e3610fd6a6ed2e4231a5a0f03cc0c5228882352be50#npm:5.0.0-alpha.16 (via /home/john/Downloads/repos/app3/.yarn/$$virtual/@material-ui-styled-engine-virtual-86fc2e9b6c/0/cache/@material-ui-styled-engine-npm-5.0.0-alpha.16-44bcbbc6f6-97205f1e3e.zip/node_modules/@material-ui/styled-engine/)
Ancestor breaking the chain: app@workspace:.


 @ ./.yarn/$$virtual/@material-ui-core-virtual-b4e36a737f/0/cache/@material-ui-core-npm-5.0.0-alpha.17-5d57e841a9-bb8c85bd0e.zip/node_modules/@material-ui/core/styles/experimentalStyled.js 3:0-48 68:32-38
 @ ./.yarn/$$virtual/@material-ui-core-virtual-b4e36a737f/0/cache/@material-ui-core-npm-5.0.0-alpha.17-5d57e841a9-bb8c85bd0e.zip/node_modules/@material-ui/core/Box/Box.js 7:0-50 98:15-21
 @ ./.yarn/$$virtual/@material-ui-core-virtual-b4e36a737f/0/cache/@material-ui-core-npm-5.0.0-alpha.17-5d57e841a9-bb8c85bd0e.zip/node_modules/@material-ui/core/Box/index.js 1:0-32 1:0-32
 @ ./src/index.js 5:0-40 6:50-53

webpack 5.8.0 compiled with 2 errors and 1 warning in 1594 ms

Expected Behavior 🤔

Steps to Reproduce 🕹

Steps:

1. Clone https://github.com/johnrichardrinehart/issue_material_ui
2. yarn set version berry
3. yarn run build
4. Analyze the output and confirm that it looks like what I posted above.

Context 🔦

This blocks my builds.

Your Environment 🌎

The below output is the snippet from yarn.lock relevant to material-ui:

"@material-ui/core@npm:next":
  version: 5.0.0-alpha.17
  resolution: "@material-ui/core@npm:5.0.0-alpha.17"
  dependencies:
    "@babel/runtime": ^7.4.4
    "@material-ui/styled-engine": ^5.0.0-alpha.16
    "@material-ui/styles": ^5.0.0-alpha.15
    "@material-ui/system": ^5.0.0-alpha.17
    "@material-ui/types": ^5.1.0
    "@material-ui/unstyled": ^5.0.0-alpha.17
    "@material-ui/utils": ^5.0.0-alpha.17
    "@popperjs/core": ^2.4.4
    "@types/react-transition-group": ^4.2.0
    clsx: ^1.0.4
    csstype: ^3.0.2
    hoist-non-react-statics: ^3.3.2
    prop-types: ^15.7.2
    react-is: ^16.8.0 || ^17.0.0
    react-transition-group: ^4.4.0
  peerDependencies:
    "@emotion/react": ^11.0.0
    "@emotion/styled": ^11.0.0
    "@types/react": ^16.8.6 || ^17.0.0
    react: ^16.8.0 || ^17.0.0
    react-dom: ^16.8.0 || ^17.0.0
  peerDependenciesMeta:
    "@emotion/react":
      optional: true
    "@emotion/styled":
      optional: true
    "@types/react":
      optional: true
  checksum: bb8c85bd0ea7b9a793c26bd0d8ee8924bfcb98b8282fdd7c2d45c5b2e6df9cf0ddc764628068c031d01a365d9a149c5d25f114d9a4be82f1a587086993f470d3
  languageName: node
  linkType: hard

Tech	Version
Material-UI	v5.?.?
React	17.0.1
Browser	Chrome (but irrelevant)
TypeScript	No
etc.	webpack 5.7.0 and all other dependencies in my package.json

Further Note

I also tested this with yarn 1.22.10 and encountered the exact same errors and warning.

[mbrookes]

A peer dependency means that a package (@material-ui/style(d)-engine in this case) expects the dependency to be provided by someone else† (the “peer” in peer dependency).

So “it isn’t provided by your application” points to the fact that your application needs to include it as a dependency.

†The reason for this being that you have the option to use styled-components instead of emotion, so making it a direct dependency would cause emotion to be loaded regardless of your choice of style library.

[johnrichardrinehart]

@oliviertassinari Thanks for answering. That’s clear. I appreciate it.