ReactJS 在 src/ 目录外导入组件

Question

我有两个反应应用程序（A-app，B-app）。我需要将一个组件从 A-app 导入到 B-app。但是当我尝试这样做时，我看到了这个错误。

./src/App.js
Module not found: You attempted to import ../../src/components/Dashboard/container which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

我试图在 B-app node_modules 中的这个组件上做符号链接。但它没有用。

我还尝试在根项目目录中创建 .env 文件并将其放入NODE_PATH=src/ 文件中。但是这个解决方案也不起作用。

我怎样才能解决这个问题？

对不起我的英语不好。

Answer 1

我在尝试解决类似问题时偶然发现了这篇文章。我认为该解决方案可能是相关的，因此我将其发布在这里。

从 NPM 2.0 开始，您可以在package.json. 这允许您在外部文件夹中维护本地模块，src/并node_modules在npm install.

将您的模块放置在 之外的任何位置src/，例如：

./packages/app-b-dashboard

package.json使用file:前缀声明本地依赖项：

"dependencies": {
  "app-b-dashboard": "file:./packages/app-b-dashboard"
}

跑

npm install

现在你可以在你的 A-app 中导入它

import Dashboard from 'app-b-dashboard/container' 

Answer 2

你在使用创建反应应用程序吗？如果是，您需要将模块移动到 src 目录中。这是 create-react-app 的开发人员添加的特殊限制。这里提到

如果移动代码不适合您，有两种解决方案。

• 将组件作为模块并像私有包一样 npm 安装它
• 这里有一个解决方法

Answer 3

进入您的 A-appnode_modules文件夹并运行以下命令

ln -s ../../../src/components/Dashboard ./app-b-dashboard

在文件夹中创建以下符号链接后，node_modules您可以import在 A-app 中

import Dashboard from 'app-b-dashboard/container'

根据项目的具体布局，名称可能会有所不同。根据您提供的信息，这是我的最佳猜测。