adobe / adobe/react-spectrum

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

Open
#6,240 1 comment 0 reactions 0 assignees View on GitHub
bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.