使用 Yarn 2 链接 React 组件时出现模块未找到错误

Question

我创建了一个存储库，其中包含一个 React 应用程序（使用 创建create-react-app）和一个组件目录，其中包含一个简单的 Material UI 按钮。文件夹结构为：

/components
/react-app

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

我构建组件：

$ cd ~/components && yarn build

然后，我用 Yarn 将组件链接到 React 应用程序：

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

package.json这会导致目录中的文件发生修改react-app：

{
  "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;

但是，当我使用运行 React 应用程序时，yarn start出现以下错误：

./src/App.tsx
Module not found: Your application tried to access components, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

我不确定我做错了什么。如果我添加对其中的组件目录的显式引用dependencies（我认为我不应该这样做，因为我已经链接了它），例如：

"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.

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

编辑：根据Yarn 文档“Webpack 5 将原生支持 PnP，但如果您使用 Webpack 4，则需要自己添加 pnp-webpack-plugin 插件”。在撰写本文时，最新版本create-react-app依赖于 v3.4.1，react-scripts而 v3.4.1 又依赖于 Webpack 4。因此，我弹出我的应用程序以检查 Webpack 配置，看来该插件已安装。因此，这不是 CRA/Webpack 问题。我还将 Node 版本从 v10.16.0 升级到 v12.16.3，但没有效果。

Answer 1

太长了；将包添加为依赖项，然后修改 React 设置以导入目录外部的文件/src。

就我而言，除了在 中添加条目之外，它看起来没有yarn link做任何其他事情，根据文档，该条目仅用于指定要解析的版本。也许我对 Yarn 链接的理解是错误的（尽管它在 v1 中成立）。resolutionspackage.json

为了解决这个问题，我必须在 package.json 中添加引用dependencies（即使我已经运行了yarn link）：

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

这导致了上述You attempted to import components which falls outside of the project src/ directory错误。为了解决这个问题，我们要么需要弹出 React 应用程序并禁用ModuleScopePluginWebpack（因此允许导入文件/src夹外部的文件），要么使用带有自定义配置的craco 。我创建了yarn-eject和craco分支来演示两者。

这不是一个特别优雅的解决方案，我希望有人可以发布更好的替代方案。我切换到 Yarn 2，这样我就可以利用“改进的对等依赖链接”功能（这样我就只依赖于react我的应用程序和共享组件包的一个版本）。如果可能的话，我宁愿不必弹出我的 React 应用程序或使用自定义配置。