19

I have two react apps(A-app, B-app). I need to import one component from A-app to B-app. But when I try to do this I see 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. But it didn't work.

Also I tried to create .env file in the root project directory and put this NODE_PATH=src/ in file. But this didn't work either.

How can I fix this?

Improve this question
2
  • Why creating a symlink didn't work? What error did you get? Commented Apr 7, 2018 at 9:24
  • If I created symlink, I see 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 think its because I havent .min in my component. Commented Apr 7, 2018 at 9:37

4 Answers 4

Reset to default
27

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. This allows you to maintain local modules in a folder outside of src/ and have them copied to node_modules during npm install.

Place your module anywhere outside of src/, for example:

./packages/app-b-dashboard

Declare a local dependency in package.json using the file: prefix:

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

Run

npm install

Now you can import it in your A-app

import Dashboard from 'app-b-dashboard/container'
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Is this solution still valid, can anybody confirm? because when try this I am getting another error. -> Could not install from "..\my\component\path\from\AppB" as it does not contain a package.json file.
Hi, I tried it, but it gives me this exceptionAdd @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. but I do have this the @babel/preset-react in the presets, how can I fix it?
@RavikumarB it does work, and you need a package.json file in the folder you're importing from.
8

are you using create react app ? if yes, you need to move your module into your src directory. This is special restriction added by developers of create-react-app . mentioned here

If moving the code is not an option for you, there are 2 solutions.

  • make the component as a module and npm install it like a private package
  • There is a workaround here
Improve this answer

1 Comment

Yes, I use create-react-app. I can to move component in src/ directory, but I dont want to copy the code. Its reason why I try to import from outside of src/.
5

Got to your A-app node_modules folder and run the following

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 

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.

Improve this answer

3 Comments

Thanks for this solution! How to do symlink from B-app on all modules in directory node_modules A-app?
I think it would be better to ask a new question by stackexchange rules. Anyway if all you need in B-app is just A-app modules maybe you could just replace the node_modules of B-app with symlink to A-app node_modules. But i really not sure it is a good idea. Another option create symlinks one by one
Ok, Thank you very much for answer!
0

I removed my node_module and package-lock.json files. and reinstall npm using npm install resolved my errors. I dont know this is a good way to do it. but its worked for me.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.