ReactJS 在 src/ 目录外导入组件答案

【问题标题】：ReactJS import component outside src/ directoryReactJS 在 src/ 目录外导入组件
【发布时间】：2018-09-17 05:06:15
【问题描述】：

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

我该如何解决这个问题？

对不起我的英语。

【问题讨论】：

为什么创建符号链接不起作用？你得到了什么错误？
如果我创建了符号链接，我会看到 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/。我认为 its because I havent .min 在我的组件中。

标签： javascript reactjs ecmascript-6

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

从 NPM 2.0 开始，您可以在 package.json 中声明本地依赖项。这允许您在src/ 之外的文件夹中维护本地模块，并在npm install 期间将它们复制到node_modules。

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

./packages/app-b-dashboard

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

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

运行

npm install

现在您可以将其导入您的 A-app 中

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

【讨论】：

这个解决方案还有效吗，有人可以确认吗？因为当我尝试这个时，我得到了另一个错误。 -> 无法从“..\my\component\path\from\AppB”安装，因为它不包含 package.json 文件。
嗨，我试过了，但它给了我这个异常Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing. 但我确实在预设中有这个@babel/preset-react，我该如何解决？
@RavikumarB 它确实有效，您需要在要从中导入的文件夹中包含一个 package.json 文件。

【解决方案3】：

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

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

在您的node_modules 文件夹中创建以下符号链接后，您可以在您的应用程序中import

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

名称可能因项目的特定布局而异。根据您提供的信息，这是我的最佳猜测。

【讨论】：

感谢您的解决方案！如何在 node_modules A-app 目录中的所有模块上从 B-app 进行符号链接？
我认为通过stackexchange规则提出一个新问题会更好。无论如何，如果您在 B-app 中需要的只是 A-app 模块，也许您可以将 B-app 的 node_modules 替换为 A-app node_modules 的符号链接。但我真的不确定这是个好主意。另一种选择一个一个地创建符号链接
好的，非常感谢您的回答！

【解决方案4】：

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

如果移动代码不是您的选择，有两种解决方案。

将组件作为一个模块，然后像私有的一样安装它包
有一个解决方法here

【讨论】：

是的，我使用 create-react-app。我可以在 src/ 目录中移动组件，但我不知道t want to copy the code. Its 为什么我尝试从 src/ 外部导入。
为什么投反对票？提供的两个解决方案都解决了操作的要求