14

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

Also I tried to create .env file in root project directory and put this NODE_PATH=src/ in file. But this solve doesn`t work too.

How can I fix this?

Sorry for my English.

Rodrigo Caballero
  • 1,090
  • 1
  • 15
  • 27
Just Snake
  • 541
  • 2
  • 6
  • 10
  • Why creating a symlink didn't work? What error did you get? – Moti Korets Apr 07 '18 at 09: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 it`s because I haven`t .min in my component. – Just Snake Apr 07 '18 at 09:37

4 Answers4

25

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'
olipo186
  • 371
  • 4
  • 3
  • 3
    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. – Ravikumar B Feb 02 '21 at 08:25
  • Hi, I tried it, but it gives me this exception`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.` but I do have this the @babel/preset-react in the presets, how can I fix it? – user3927415 Jun 18 '21 at 11:01
  • 1
    @RavikumarB it does work, and you need a package.json file in the folder you're importing from. – kburgie Oct 13 '21 at 18:23
7

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
Rajat banerjee
  • 1,781
  • 3
  • 17
  • 35
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.

Moti Korets
  • 3,738
  • 2
  • 26
  • 35
  • Thanks for this solution! How to do symlink from B-app on all modules in directory node_modules A-app? – Just Snake Apr 07 '18 at 10:30
  • 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 – Moti Korets Apr 07 '18 at 10:34
  • Ok, Thank you very much for answer! – Just Snake Apr 07 '18 at 10:47
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.

Buddhika
  • 163
  • 1
  • 7