Yarn pnp error when loading @spectrum-icons: Could not resolve "@babel/runtime/helpers/extends"

[chriswoodle]

Provide a general summary of the issue here

When using yarn pnp, @spectrum-icons/ui imports @babel/runtime/helpers/extends, which is disallowed since @babel/runtime is not listed as a dependency.

X [ERROR] Could not resolve "@babel/runtime/helpers/extends"

    .yarn/__virtual__/@spectrum-icons-ui-virtual-cf610ece7d/3/AppData/Local/Yarn/Berry/cache/@spectrum-icons-ui-npm-3.6.5-c035e906cb-10c0.zip/node_modules/@spectrum-icons/ui/AlertMedium.module.mjs:1:21:
      1 │ import _extends from "@babel/runtime/helpers/extends";
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@babel/runtime" here because it's not listed
  as a dependency of this package:

    .pnp.cjs:5704:31:
      5704 │         "packageDependencies": [\
           ╵                                ~~

  You can mark the path "@babel/runtime/helpers/extends" as external to exclude it from the       
  bundle, which will remove this error and leave the unresolved path in the bundle.

🤔 Expected Behavior?

Error should not be produced in build.

😯 Current Behavior

Error is produced when running app in development:

$ yarn dev

  VITE v5.2.9  ready in 1678 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
X [ERROR] Could not resolve "@babel/runtime/helpers/extends"

    .yarn/__virtual__/@spectrum-icons-ui-virtual-cf610ece7d/3/AppData/Local/Yarn/Berry/cache/@spectrum-icons-ui-npm-3.6.5-c035e906cb-10c0.zip/node_modules/@spectrum-icons/ui/AlertMedium.module.mjs:1:21:
      1 │ import _extends from "@babel/runtime/helpers/extends";
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The Yarn Plug'n'Play manifest forbids importing "@babel/runtime" here because it's not listed
  as a dependency of this package:

    .pnp.cjs:5704:31:
      5704 │         "packageDependencies": [\
           ╵                                ~~

  You can mark the path "@babel/runtime/helpers/extends" as external to exclude it from the       
  bundle, which will remove this error and leave the unresolved path in the bundle.

💁 Possible Solution

Add @babel/runtime to one of the dependency sections of its package.json.

Workaround for now is to use yarn package extensions:

.yarnrc.yml

packageExtensions:
  "@spectrum-icons/ui@*":
    dependencies:
      "@babel/runtime": "*"

🔦 Context

Similar issue to: https://github.com/adobe/react-spectrum/issues/1779

🖥️ Steps to Reproduce

From your desired directory:

mkdir test
yarn init
yarn create vite@latest .
# select react typescript
yarn select version berry
yarn install
yarn add @adobe/react-spectrum

In your App.tsx, add:

import { Button, defaultTheme, Provider } from '@adobe/react-spectrum';

yarn dev

App will then fail to start.

Version

3.34.1

What browsers are you seeing the problem on?

Other

If other, please specify.

No browser

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Thanks!

[snowystinger]

Seems reasonable for now. We were also talking about replacing our use of babel in icons with swc.