reactjs - 使用 Yarn 2 链接 React 组件时未找到模块错误
问题描述
我创建了一个存储库,其中包含一个 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,但无济于事。
解决方案
TLDR;将包添加为依赖项,然后修改您的 React 设置以导入目录之外的/src
文件。
就我而言,除了在 中添加一个条目外,它看起来没有yarn link
做任何其他事情,根据文档,它仅用于指定要解析的版本。也许我对 Yarn 链接的理解是错误的(尽管它在 v1 中得到了支持)。resolutions
package.json
为了解决这个问题,我必须dependencies
在 package.json 中添加对的引用(即使我已经运行了yarn link
):
"dependencies": {
"components": "portal:../components"
}
这导致了上述You attempted to import components which falls outside of the project src/ directory
错误。为了解决这个问题,我们要么需要弹出 React 应用程序并禁用ModuleScopePlugin
Webpack 中的(因此允许导入文件夹外的/src
文件),要么使用带有自定义配置的 craco 。我已经创建yarn-eject
和craco
分支来演示两者。
这不是一个特别优雅的解决方案,我希望有人可以发布更好的选择。我切换到 Yarn 2,以便我可以利用“改进的对等依赖链接”react
功能(这样我在我的应用程序和共享组件包中只依赖一个版本)。如果可能的话,我宁愿不必弹出我的 React 应用程序或使用自定义配置。
推荐阅读
- c# - 从 DbSet 中删除记录会在 EF Core 中引发“值不能为空”错误
- c# - 如何根据特定值从对象列表中获取对象?C#
- i18next - i18next::backendConnector: TypeError: 仅支持绝对 URL
- gnupg - GPG 将秘密移至 Yubikey 时添加地铁
- mongodb - 如何在 MongoDB 中创建具有不同过滤器的多个聚合?
- python - 如何为熊猫中的每一行获取上一行和下一行的序列
- javascript - 从 chrome 扩展插入 iframe 在某些网站上不起作用
- database-design - 关于数据库设计的问题 - 表层次结构
- log4j2 - Pulsar Log4j2 Appender 错误:名称为“pulsar-log4j2-appender-applog-json”的生产者已连接到主题
- javascript - 将数组减少为具有嵌套键的对象,用于将搜索查询传递给 Mongoose 中的 Model.find