src/ 目录外的 ReactJS 导入组件

IT技术 javascript reactjs ecmascript-6
2021-05-11 13:01:48

我有两个react应用程序(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/ 文件中。但是这个解决方案也不起作用。

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

对不起我的英语不好。

4个回答

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

从 NPM 2.0 开始,您可以在package.json. 这允许您在外部文件夹中维护本地module,src/node_modulesnpm install.

将您的module放置在 之外的任何位置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' 

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

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

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

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

根据项目的特定布局,名称可能会有所不同。这是我根据您提供的信息做出的最佳猜测。

你在使用 create react app 吗?如果是,则需要将module移动到 src 目录中。这是 create-react-app 的开发者添加的特殊限制。这里提到

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

  • 将组件作为module,然后 npm 将其安装为私有包
  • 有一种变通方法 在这里

我删除了我的node_modulepackage-lock.json文件。npm使用npm install解决了我的错误重新安装我不知道这是一个很好的方法。但它对我有用。