False positive in ModuleScopePlugin with yarn2 "workspace:*" packages
See original GitHub issueDescribe 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.
Reproducible demo
Issue Analytics
- State:
- Created 3 years ago
- Reactions:10
- Comments:8 (2 by maintainers)
Top Results From Across the Web
Workspaces - Yarn
Workspaces are a new way to set up your package architecture that's available by default starting from Yarn 1.0. It allows you to...
Read more >Yarn 2.1 β Git Workspaces, Focused Installs, Loose mode ...
The Babel and Jest repositories are now powered by Yarn 2, ... able to prevent the warnings from being emitted, thus causing false...
Read more >Yarn workspaces β monorepo beginner's guide - Medium
In this guide, we will create a sample monorepo using Yarn workspaces. It will contain both back-end (express) and front-end (react) projects, using...
Read more >Advanced package manager features for npm, Yarn, and pnpm
Exploring workspaces, CI/CD install strategies, and alternative dependency resolution. April 14, 2022 21 min read 6099. This article aims to leave you withΒ ......
Read more >Snyk for Yarn - Snyk User Docs
snyk test --yarn-workspaces --strict-out-of-sync=false --detection-depth=6 scans only the Yarn Workspace packages that belong to any discovered workspaces ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Implication here is quite serious: CRA app in yarn 2 workspace with pnp canβt be split into multiple packages in the same workspace due to this check.
I have no clue what I am doing, but using yarn patch protocol I made it work, I think