[英]ReactJS import component outside src/ directory
I have two react apps(A-app, B-app).我有两个反应应用程序(A-app,B-app)。 I need to import one component from A-app to B-app.我需要将一个组件从 A-app 导入到 B-app。 But when I tried to do this I have seen this error.但是当我尝试这样做时,我看到了这个错误。
./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/.
I tried to do symlink on this component in B-app node_modules.我试图在 B-app node_modules 中的这个组件上做符号链接。 But it didn`t work.但它没有用。
Also I tried to create .env file in root project directory and put this NODE_PATH=src/
in file.我还尝试在根项目目录中创建 .env 文件并将此NODE_PATH=src/
放在文件中。 But this solve doesn`t work too.但是这个解决方案也不起作用。
How can I fix this?我怎样才能解决这个问题?
Sorry for my English.对不起我的英语不好。
I stumbled on this post while trying to solve a similar issue.我在尝试解决类似问题时偶然发现了这篇文章。 I think the solution might be relevant so I'm posting it here.我认为该解决方案可能是相关的,因此我将其发布在这里。
As of NPM 2.0 you can declare local dependencies in package.json
.从 NPM 2.0 开始,您可以在package.json
声明本地依赖项。 This allows you to maintain local modules in a folder outside of src/
and have them copied to node_modules
during npm install
.这允许您在src/
之外的文件夹中维护本地模块,并在npm install
期间将它们复制到node_modules
。
Place your module anywhere outside of src/
, for example:将您的模块放在src/
之外的任何位置,例如:
./packages/app-b-dashboard
Declare a local dependency in package.json
using the file:
prefix:使用file:
前缀在package.json
声明本地依赖项:
"dependencies": {
"app-b-dashboard": "file:./packages/app-b-dashboard"
}
Run跑步
npm install
Now you can import it in your A-app现在你可以在你的 A-app 中导入它
import Dashboard from 'app-b-dashboard/container'
are you using create react app ?你在使用 create react app 吗? if yes, you need to move your module into your src directory.如果是,则需要将模块移动到 src 目录中。 This is special restriction added by developers of create-react-app .这是 create-react-app 的开发者添加的特殊限制。 mentioned here这里提到
If moving the code is not an option for you, there are 2 solutions.如果移动代码不适合您,有两种解决方案。
Got to your A-app node_modules
folder and run the following到您的 A-app node_modules
文件夹并运行以下命令
ln -s ../../../src/components/Dashboard ./app-b-dashboard
After creating the following symbolic link in your node_modules
folder you can import
in you A-app在node_modules
文件夹中创建以下符号链接后,您可以在 A-app 中import
import Dashboard from 'app-b-dashboard/container'
The names might be different depending on the specific layout of your project.根据项目的特定布局,名称可能会有所不同。 This is my best guess based on the info you provided.这是我根据您提供的信息做出的最佳猜测。
I removed my node_module
and package-lock.json
files.我删除了node_module
和package-lock.json
文件。 and reinstall npm
using npm install
resolved my errors.并使用npm install
重新安装npm
解决了我的错误。 I dont know this is a good way to do it.我不知道这是一个很好的方法。 but its worked for me.但它对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.