yarn 2: styled-components tried to access babel-plugin-macros, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound

[oscar-b]

Environment

System:

• OS: macOS 10.15.4
• CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
• Memory: 138.32 MB / 16.00 GB
• Shell: 3.0.2 - /usr/local/bin/fish

Binaries:

• Node: 10.15.3 - /usr/local/bin/node
• Yarn: 2.0.0-rc.31 - /usr/local/bin/yarn
• npm: 6.4.1 - /usr/local/bin/npm

Reproduction

Set up Create React App and activate yarn 2:

yarn policies set-version berry # below v1.22
yarn set version berry          # on v1.22+

Steps to reproduce

Import styled-components/macro. On run, yarn pnp mode gives an error:

Error: /Users/oscar/dev/project/web/src/App.tsx: styled-components tried to access babel-plugin-macros, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: babel-plugin-macros (via "babel-plugin-macros")
Required by: styled-components@virtual:0d5aa5500cbca2d3fcc21adcb64334074e8710671acd4ae29d1af3c365b4c3dba1ae60e06b992407726ee5d7ee53328c19666ae24231cca5934da6e9af9e4e8a#npm:5.0.1 (via /Users/oscar/dev/project/.yarn/$$virtual/styled-components-virtual-2f170adae1/0/cache/styled-components-npm-5.0.1-87fcb612e6-2.zip/node_modules/styled-components/dist/)

Require stack:
- /Users/oscar/dev/project/.yarn/$$virtual/styled-components-virtual-2f170adae1/0/cache/styled-components-npm-5.0.1-87fcb612e6-2.zip/node_modules/styled-components/dist/styled-components-macro.cjs.js
- /Users/oscar/dev/project/.yarn/cache/babel-plugin-macros-npm-2.8.0-451367d7e7-2.zip/node_modules/babel-plugin-macros/dist/index.js
- /Users/oscar/dev/project/.yarn/cache/babel-preset-react-app-npm-9.1.2-dce39fa2e0-2.zip/node_modules/babel-preset-react-app/create.js
- /Users/oscar/dev/project/.yarn/cache/babel-preset-react-app-npm-9.1.2-dce39fa2e0-2.zip/node_modules/babel-preset-react-app/index.js
- /Users/oscar/dev/project/.yarn/cache/@babel-core-npm-7.9.0-f059c18399-2.zip/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/oscar/dev/project/.yarn/cache/@babel-core-npm-7.9.0-f059c18399-2.zip/node_modules/@babel/core/lib/config/files/index.js
- /Users/oscar/dev/project/.yarn/cache/@babel-core-npm-7.9.0-f059c18399-2.zip/node_modules/@babel/core/lib/index.js
- /Users/oscar/dev/project/.yarn/$$virtual/babel-loader-virtual-c1e9567555/0/cache/babel-loader-npm-8.1.0-e8c38740ba-2.zip/node_modules/babel-loader/lib/index.js
- /Users/oscar/dev/project/.yarn/cache/loader-runner-npm-2.4.0-c414104c2f-2.zip/node_modules/loader-runner/lib/loadLoader.js
- /Users/oscar/dev/project/.yarn/cache/loader-runner-npm-2.4.0-c414104c2f-2.zip/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/oscar/dev/project/.yarn/cache/webpack-npm-4.42.0-16931ca611-2.zip/node_modules/webpack/lib/NormalModule.js
- /Users/oscar/dev/project/.yarn/cache/webpack-npm-4.42.0-16931ca611-2.zip/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/oscar/dev/project/.yarn/cache/webpack-npm-4.42.0-16931ca611-2.zip/node_modules/webpack/lib/Compiler.js
- /Users/oscar/dev/project/.yarn/cache/webpack-npm-4.42.0-16931ca611-2.zip/node_modules/webpack/lib/webpack.js
- /Users/oscar/dev/project/.yarn/$$virtual/react-scripts-virtual-42170a1c8f/0/cache/react-scripts-npm-3.4.1-6d60154e83-2.zip/node_modules/react-scripts/scripts/start.js

[oscar-b]

This seems to work as a temporary workaround, in .yarnrc.yml:

packageExtensions:
  "styled-components@*":
    dependencies:
      "babel-plugin-macros": "*"

[oscar-b]

Here is a repo reproducing the issue with CRA: https://github.com/oscar-b/styled-pnp

[rek]

Note: make sure to run yarn again after changing the .yarnrc.yml to include the missing deps:

packageExtensions:
  styled-components@*:
    dependencies:
      babel-plugin-macros: '*'
      react-is: '*'

[cozimacode]

Note: make sure to run yarn again after changing the .yarnrc.yml to include the missing deps:

packageExtensions:
  styled-components@*:
    dependencies:
      babel-plugin-macros: '*'
      react-is: '*'

I owe you big time, @rek

I was on the verge of pulling my hair trying to figure out why packageExtensions was not working. Not even a single resource in the numerous ones I checked mentioned the point that you did. Thanks a lot!

[kachkaev]

I’m not relying on babel-plugin-macros, but have faced the same issue for react-is. The solution was adding this to the project’s .yarnrc.yml:

packageExtensions:
  styled-components@*:
    dependencies:
      react-is: "*"

I guess that if we add react-is and babel-plugin-macros as package dependencies, this issue will be resolved. Any thoughts why we should not be doing this?

[quantizor]

There is a vote in progress to potentially remove the babel macro due to lack of usage/interest, please vote if you care thanks. #4064 (comment)