Yarn pnp error when loading @spectrum-icons: Could not resolve "@babel/runtime/helpers/extends"
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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:
```ts
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!
Contributor guide
Assessment
This issue has not been assessed yet.