Can't import js file in parent folder

[quantuminformation]

Description

Can't import js file in parent folder

Reproduction

import {ReactNativeCron} from '../ReactNativeCron' gives error:
Directory /Users/nikos/WebstormProjects/react-native-cron/ReactNativeCron doesn't exist

If I move the file to ./ReactNativeCron it works

• React Native version: "react-native": "0.40.0"

• Platform: iOS

• Operating System:MacOS

see https://github.com/QuantumInformation/react-native-cron/commit/ea7fdf2b2d8e280d630baf855da4b4d888772195

[brentvatne]

I don't believe that this is a bug, you should not be able to read files from outside of your project's root.

[gensc004]

@hnryjms and I ran in to this as well. It is an issue for us because our react-native app is a subdirectory of our repo that contains a web app and server code. We have a lib directory that contains useful JS code for all projects, and would like to be able to use it everywhere. We could make the lib directory a local NPM module and install it into both projects, but that makes local development somewhat annoying.

The solution we found was to add the file called rn-cli.config.js at the Mobile app's root which is the default file the react-native packager looks at for specifying run configurations.

const Path = require('path');

module.exports = {
    getProjectRoots: () => [ __dirname, Path.join(__dirname, "..") ]
};

[doque]

@gensc004 Can you specify? I'm going up two directories, but adding __dirname, Path.join(__dirname, "../..") doesn't work for me:

├── components
│   └── Demo.js      # this is the component I want to include from both web and native
├── examples
│   ├── native
│   │   ├── App.js
│   │   ├── App.test.js
│   │   ├── Demo.js
│   │   ├── README.md
│   │   ├── app.json
│   │   ├── package.json
│   │   ├── rn-cli.config.js
│   │   └── yarn.lock
│   └── web
│       └── index.js

Code inside examples/native/App.js

import Demo from "../../components/Demo";

I keep getting this error:

[gensc004]

@doque, Just to make sure, have you rebuilt your project after adding the rn-cli config file?

[kylebebak]

@gensc004
I've been getting the same error as @doque . I'm trying to import a module that's at ../components/Module relative to the root of my RN project, and I've added the rn-cli.config.js as you suggested to the root of the project.

The error says that the directory doesn't exist. It's not a directory, it's a module, and the path to the module printed in the error is correct, but for some reason the packager can't find it.

[doque]

I've built the project numerous times. I've set up from-scratch using both create-react-native-app and react-native init, in both cases I'm unable to require modules outside the respective root directories. Adding the rn-cli.config.js did not help, even running npm link didn't work.
The only thing that vaguely resembled a solution was manually copying my modules to node_modules of the mobile app, which obviously is no solution to this.

[quantuminformation]

Can someone reopen this ticket?

[gensc004]

@doque, @kylebebak What versions of react-native are you on? I checked back through my solution to see if I missed any steps and haven't found anything that seems amiss, but I will keep trying to help where I can. Also, I currently only use this solution for IOS and haven't tried it on android so that may be part of the problem.

[gensc004]

I just made a new project with react-native init, and tried the solution on IOS (I only have access to an IOS emulator at the moment). After adding the rn-config file, closing my bundler, and re-running the build it worked for me. The only thing I can see being a problem is that the solution doesn't work on Android. If someone could confirm that they are seeing the solution not working on Android that would be awesome, and then we can try to find a solution that works for both!

[doque]

I'm running these versions:

➜  ~ react-native --version                                                       17:59:11
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory
➜  ~ node --version                                                               17:59:21
v6.9.4
➜  ~ npm --version                                                                17:59:25
3.10.10

[gensc004]

@doque, doesn't look like it is a version problem, are you testing on android or ios?

[doque]

I'm running react-native run-ios. BTW this issue occurs as well if using create-react-native-app and Expo.

[ninsy]

Exact stuff happens with command 'react-native run-android'. What's even worse, I've also moved my source file into project's root and still receiving error 'Unable to resolve module ... Directory doesn't exist".
React-Native ver: 0.45.0, React ver: 16.0.0-alpha.12

[kylebebak]

@gensc004

I'm using Expo 18, which means I'm on RN 0.45.0. We found a work-around and no longer need to import modules from outside the project root, but it would be nice to know if you guys find a solution to this problem.

[doque]

@kylebebak what's your workaround?

[kylebebak]

@doque
The workaround is only for our specific use case, which was to share components between different react native apps that live in the same repo.

I'm going to blog about it at some point.

[colin-han]

@kylebebak what's your workaround? :-)

[untoldone]

@brentvatne how should we be references shared libraries that might be used in either multiple react-native apps / a react web app where both the libraries and apps are being developed at the same time?

I've been searching for the for 30 minutes now and can't find a working solution on StackOverflow / in other bugs etc. If it is possible, it seems like this deserves docs?

@gensc004 do you have a simple working example of this or copy of code you can share of how you import the packages + the directory structure? I can't seem to get your solution to work either

[arronhunt]

Has anyone had any luck with this? Neither npm link nor rn-cli.config.js have worked

[quantuminformation]

Nope, you just have to have everything within the root of the RN project

[ericketts]

for anyone still having issues, combining the rn-cli.config.js hack with the package.json hack worked for me (allowing me to import files contained in directories adjacent to my react-native src dir using absolute paths).

unfortunately this is more than a bug, its a design flaw in node-haste and by extension metro...

[leturtle]

Finally, we found a solution - Haul.

And here is an example project

[MPiwowarski]

@ericketts can you upload please some sample project which shows how to solve the issue?

[ericketts]

@MPiwowarski check here for an example project, hope this helps! (and that it's actually what you're trying to do 😁)

Edit: I should point out for haul, which has been suggested, realize that the lack of support for delta bundles could cause headaches down the road on Android, for instance react-native-navigation proved incompatible with haul because of the lack of delta bundle support.

[MPiwowarski]

@ericketts thank you very much! It works properly. I've also added some sample react native component to your shared folder and imported it in App.js in rn folder and works fine :) Do you think your solution works also with Expo? Cheers

[ericketts]

@MPiwowarski I'm not sure whether expo would work with that configuration, to be honest I gave up on expo after their exp init tool created a broken build out of the box due to case sensitive filesystem issues (it was already off putting to me that they don't offer instructions on manually integrating expo into an existing project).

[MPiwowarski]

@ericketts I've made a fork from your solution, you can check it here I've added expo project to the src folder and also created Sample react native component in the shared folder. Both projects expo and rn import that component and use it in App.js.

[AndrewSouthpaw]

@ericketts and @MPiwowarski, thank you so much for putting together those repos. They were instrumental in helping us set up code sharing between our native and web apps. Many, many thanks, and I hope others will find this. This is probably the most simple solution I've found to sharing code.

[ericketts]

worth noting that this hack my break soon

[AndrewSouthpaw]

Also, were you able to get this to work with eslint? The package.json files that simply contain the name mess up how eslint is resolving modules and detecting which dependencies are already added.

[ericketts]

I'm not sure I had that issue since I don't have any duplication of deps. We do use eslint and it all seems to work without any special configuration.

[AndrewSouthpaw]

Ah. Yeah, so switching over to using "extends": "react-app" in the eslint config fixed it for us. For whatever reason, our old approach of using the eslint webpack resolver didn't cut the mustard, while this new config more intelligently handles the dependencies.

[AndrewSouthpaw]

Nope, I spoke to soon. It looks like that config simply doesn't check the validity of imported modules. 😞