False positive in ModuleScopePlugin with yarn2 "workspace:*" packages
Created by: Xerkus
Describe the bug
ModuleScopePlugin incorrectly detects import from package in yarn 2 pnp workspace as relative path.
Module not found: You attempted to import /snip/packages/assets/Logo-BlueOrange.svg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
// package.json
"dependencies": {
"@my/assets": "workspace:*",
}
// component
import Logo from '@my/assets/Logo-BlueOrange.svg';
Same behavior is with importing .ts, so not svg specific.
Did you try recovering your dependencies?
Which terms did you search for in User Guide?
Environment
react-dev-utils@npm:11.0.2
├─ Version: 11.0.2
│
├─ Dependents
│ ├─ react-scripts@npm:4.0.2
│ └─ react-scripts@npm:4.0.2 [675a5]
│
└─ Dependencies
├─ @babel/code-frame@npm:7.10.4 → npm:7.10.4
├─ address@npm:1.1.2 → npm:1.1.2
├─ browserslist@npm:4.14.2 → npm:4.14.2
├─ chalk@npm:2.4.2 → npm:2.4.2
├─ cross-spawn@npm:7.0.3 → npm:7.0.3
├─ detect-port-alt@npm:1.1.6 → npm:1.1.6
├─ escape-string-regexp@npm:2.0.0 → npm:2.0.0
├─ filesize@npm:6.1.0 → npm:6.1.0
├─ find-up@npm:4.1.0 → npm:4.1.0
├─ global-modules@npm:2.0.0 → npm:2.0.0
├─ globby@npm:11.0.1 → npm:11.0.1
├─ gzip-size@npm:5.1.1 → npm:5.1.1
├─ immer@npm:7.0.9 → npm:7.0.9
├─ is-root@npm:2.1.0 → npm:2.1.0
├─ loader-utils@npm:2.0.0 → npm:2.0.0
├─ open@npm:^7.0.2 → npm:7.4.0
├─ pkg-up@npm:3.1.0 → npm:3.1.0
├─ prompts@npm:2.4.0 → npm:2.4.0
├─ react-error-overlay@npm:^6.0.9 → npm:6.0.9
├─ recursive-readdir@npm:2.2.2 → npm:2.2.2
├─ shell-quote@npm:1.7.2 → npm:1.7.2
├─ strip-ansi@npm:6.0.0 → npm:6.0.0
├─ text-table@npm:0.2.0 → npm:0.2.0
└─ fork-ts-checker-webpack-plugin@npm:4.1.6 → npm:4.1.6 [10d52]
Steps to reproduce
Setup CRA in yarn 2 workspace
- Create test directory
mkdir yarnws && cd yarnws
- Set local yarn version to 2.x
yarn set version berry && yarn set version latest
- Verify version
yarn --version
> 2.4.0 - Init yarn workspace
yarn init -w
- Create react app
(cd packages/ && yarn create react-app --template typescript test-cra)
- Remove bits not used in workspace install
rm -rf packages/test-cra/{.pnp.js,.yarn,yarn.lock}
- Install dependencies
yarn up
- Yarn needs those as direct dependencies:
yarn workspace test-cra add eslint-config-react-app react-refresh
- Verify it works
yarn workspace test-cra start
- Create another package:
(mkdir packages/testpkg && cd packages/testpkg && yarn init)
- Add package to yarn app
yarn workspace test-cra add "testpkg@workspace:*"
- Make ts file in the testpkg package and try to use it in react app as proper module import, eg
import { test } from 'testpkg/test'
Expected behavior
ModuleScopePlugin does not complain and does not prevent compilation
Actual behavior
Module not found: You attempted to import /home/Xerkus/workspace/yarnws/packages/testpkg/test.ts which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.