question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

False positive in ModuleScopePlugin with yarn2 "workspace:*" packages

See original GitHub issue

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

  1. Create test directory mkdir yarnws && cd yarnws
  2. Set local yarn version to 2.x yarn set version berry && yarn set version latest
  3. Verify version yarn --version > 2.4.0
  4. Init yarn workspace yarn init -w
  5. Create react app (cd packages/ && yarn create react-app --template typescript test-cra)
  6. Remove bits not used in workspace install rm -rf packages/test-cra/{.pnp.js,.yarn,yarn.lock}
  7. Install dependencies yarn up
  8. Yarn needs those as direct dependencies: yarn workspace test-cra add eslint-config-react-app react-refresh
  9. Verify it works yarn workspace test-cra start
  10. Create another package: (mkdir packages/testpkg && cd packages/testpkg && yarn init)
  11. Add package to yarn app yarn workspace test-cra add "testpkg@workspace:*"
  12. 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

https://github.com/Xerkus/cra-10508

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:10
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
Xerkuscommented, Feb 5, 2021

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.

4reactions
Xerkuscommented, Apr 29, 2021

I have no clue what I am doing, but using yarn patch protocol I made it work, I think

diff --git a/ModuleScopePlugin.js b/ModuleScopePlugin.js
index e84d2b38aabbfc8e28515859417ae9652b711b57..8d450373ceebfd8ac747f6165f2d8822900d8b26 100644
--- a/ModuleScopePlugin.js
+++ b/ModuleScopePlugin.js
@@ -35,6 +35,12 @@ class ModuleScopePlugin {
         ) {
           return callback();
         }
+        if (process.versions.pnp) {
+          const {findPackageLocator} = require('pnpapi');
+          if (findPackageLocator(request.__innerRequest_request) !== null) {
+            return callback();
+          }
+        }
         // Resolve the issuer from our appSrc and make sure it's one of our files
         // Maybe an indexOf === 0 would be better?
         if (
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found