create-react-app 在ModuleScopePlugin中使用yarn2“workspace：*”软件包时出现误报

zd287kbt 于 2022-10-28 发布在 React

关注(0)|答案(8)|浏览(191)

描述Bug

ModuleScopePlugin错误地将从纱2 pnp工作空间中的包导入检测为相对路径。
找不到模块：您尝试汇入的/snip/packages/assets/Logo-BlueOrange. svg不在项目src/目录中。不支援src/以外的相对汇入。

// package.json
"dependencies": {
    "@my/assets": "workspace:*",
}

// component
import Logo from '@my/assets/Logo-BlueOrange.svg';

导入.ts也有相同的行为，因此不是svg特定的。

是否尝试恢复依赖项？

您在《用户指南》中搜索了哪些术语？

环境

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]

重现步骤

在Yarn2工作空间中设置CRA
1.创建测试目录
x1m0n1x
1.将本地Yarn版本设置为2.x
yarn set version berry && yarn set version latest个
1.验证版本
yarn --version〉2.4.0
1.初始Yarn工作空间
yarn init -w
1.创建react应用程序
(cd packages/ && yarn create react-app --template typescript test-cra)
1.删除工作区安装中未使用的位
rm -rf packages/test-cra/{.pnp.js,.yarn,yarn.lock}
1.安装依赖项
yarn up
1.Yarn需要那些作为直接依赖：
yarn workspace test-cra add eslint-config-react-app react-refresh
1.验证其是否正常工作
yarn workspace test-cra start
1.创建另一个包：
(mkdir packages/testpkg && cd packages/testpkg && yarn init)
1.将 Package 添加到Yarn应用程序
yarn workspace test-cra add "testpkg@workspace:*"个
1.在testpkg包中创建ts文件，并尝试在react应用程序中将其用作正确的模块导入，例如import { test } from 'testpkg/test'

预期行为

ModuleScopePlugin不会抱怨，也不会阻止编译

实际行为

找不到模块：您试图导入的/home/Xerkus/workspace/yarnws/packages/testpkg/test.ts位于项目src/目录之外。不支持src/之外的相对导入。

可重现的演示

https://github.com/Xerkus/cra-10508的最大值

create-react-app

来源：https://github.com/facebook/create-react-app/issues/10508

8条答案

按热度按时间

2guxujil1#

此问题已自动标记为过时，因为它最近没有任何活动.如果没有进一步得活动，它将在5天内关闭.

赞(0）回复(0）举报 2022-10-28

f5emj3cl2#

这里的含意相当严重：由于此检查，Yarn2工作区中的CRA应用程序（带pnp）无法拆分为同一工作区中的多个软件包。

赞(0）回复(0）举报 2022-10-28

c90pui9n3#

这似乎与之前关闭#8757且未解决的问题类似。

赞(0）回复(0）举报 2022-10-28

gev0vcfq4#

也与#9226相关

赞(0）回复(0）举报 2022-10-28

bmp9r5qi5#

对于Yarn，可以使用插件中的Yarn特定查找来解决，以查看它是否是包含https://yarnpkg.com/advanced/pnpapi/的模块

赞(0）回复(0）举报 2022-10-28

tkqqtvp16#

我不知道我在做什么，但使用Yarn补丁协议，我使它工作，我想

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 (

赞(0）回复(0）举报 2022-10-28

4zcjmb1e7#

@Xerkus我测试了你的修改，它们起作用了a-把你的修改贴在这里#11237
希望这得到合并，但我托管的版本，你可以使用作为一个解决方案，在此期间

赞(0）回复(0）举报 2022-10-28

fykwrbwg8#

解决方法不是完整的检查，很可能甚至不是正确检查的一部分。其想法是查看文件是否可以被解析为属于声明为依赖项的包之一，但这并不保证它是通过依赖项而不是直接作为路径所需的。
我想这就是它的作用，但我真的不知道。

赞(0）回复(0）举报 2022-10-28