6

我创建了一个存储库，其中包含一个 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.

我不确定我做错了什么。如果我在其中添加对 components 目录的显式引用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，但无济于事。

4

1 回答 1

5

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

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

为了解决这个问题，我必须dependencies在 package.json 中添加对的引用（即使我已经运行了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 应用程序或使用自定义配置。

于 2020-05-01T07:24:55.063 回答