Reactjs 使用纱线2连接反应组件时未发现模块错误

我已经创建了一个包含React应用程序（使用

创建React应用程序

创建）和一个包含简单材质UI按钮的组件目录。文件夹结构为：

/components
/react-app

这两个目录都是为使用而设置的，不在工作区中（因为我试图在单独的目录中模拟项目，并简化我的真实场景）

我构建组件：

$ cd ~/components && yarn build

然后，我将组件添加到React应用程序：

$ cd ~/react-app & yarn link ../components -r -p

这将导致对

react app

目录中的

package.json

文件进行修改：

{
  "name": "react-app",
  ...
  "resolutions": {
    "components": "portal:../components"
  }
}

我的

App.tsx

文件如下所示：

import './App.css';

import { Button } from 'components';
import React from 'react';

function App() {
  return (
    <Button>Test</Button>
  );
}

export default App;

我不确定我做错了什么。如果我在

依赖项中添加对components目录的显式引用（我认为我不必这样做，因为我已经链接了它），例如：

然后我得到一个错误：

./src/App.tsx
Module not found: You attempted to import ~/react-app/.yarn/$$virtual/components-virtual-de9a8055ab/2/components which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

当然，我不必弹出应用程序并找到绕过此错误的方法

编辑：根据“Webpack5本机支持PnP，但如果您使用Webpack4，您需要自己添加PnP Webpack插件”。在撰写本文时，最新版本的
create-react-app
依赖于
react-scripts
的v3.4.1，而后者又依赖于Webpack 4。因此，我弹出了我的应用程序来检查网页包的配置，似乎这个插件已经安装好了。因此，这不是CRA/网页包问题。我还将Node的版本从v10.16.0升级到v12.16.3，但没有成功。
TLDR；将包添加为依赖项，然后修改React设置以导入
/src
目录之外的文件

在我的例子中，除了在
package.json
中添加一个
resolutions
条目之外，
warn link
看起来并没有做任何事情，根据的，它只用于指定要解析的版本。也许我对纱线链接的理解是错误的（即使它在v1中保持不变）

为了解决这个问题，我必须在package.json中添加对
依赖项的引用（即使我已经运行了
纱线链接
）：

这导致前面提到的
您试图导入项目src/目录之外的组件时发生错误。要解决此问题，我们需要弹出React应用程序并禁用Webpack中的
ModuleScopePlugin
（因此允许导入
/src
文件夹之外的文件），或者使用craco with。我创建了两个分支来演示这两个方面

这不是一个特别优雅的解决方案，我希望有人能发布一个更好的替代方案。我切换到Thread 2，以便能够利用该功能（因此，在我的应用程序和共享组件包中，我只依赖一个版本的
react
）。我不想弹出我的React应用程序，也不想在可能的情况下使用自定义配置。
嗨，Craig，我来这里的原因和你一样（纱线2用于React组件和“工作”的应用程序之间的链接）（无重复依赖项，无手动链接）。谢谢，它可以工作！在这个设置中，您的工作流程是什么？您的大部分开发都是在组件中进行的，与热重新加载隔离吗？当您想在应用程序中测试组件时，每次修改后您必须运行什么样的命令？在组件中运行构建，并在应用程序中重新启动启动启动？提前感谢，乔恩
"dependencies": {
  "components": "portal:../components"
}

./src/App.tsx
Module not found: You attempted to import ~/react-app/.yarn/$$virtual/components-virtual-de9a8055ab/2/components which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

"dependencies": {
  "components": "portal:../components"
}