New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't import js file in parent folder #12241

Closed
QuantumInformation opened this Issue Feb 6, 2017 · 33 comments

Comments

Projects
None yet
@QuantumInformation
Contributor

QuantumInformation commented Feb 6, 2017

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 QuantumInformation/react-native-cron@ea7fdf2

@brentvatne

This comment has been minimized.

Collaborator

brentvatne commented Feb 22, 2017

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

@brentvatne brentvatne closed this Feb 22, 2017

@gensc004

This comment has been minimized.

gensc004 commented May 11, 2017

@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

This comment has been minimized.

doque commented Jul 11, 2017

@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:
image

@gensc004

This comment has been minimized.

gensc004 commented Jul 11, 2017

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

@kylebebak

This comment has been minimized.

kylebebak commented Jul 12, 2017

@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

This comment has been minimized.

doque commented Jul 12, 2017

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

This comment has been minimized.

Contributor

QuantumInformation commented Jul 12, 2017

Can someone reopen this ticket?

@gensc004

This comment has been minimized.

gensc004 commented Jul 12, 2017

@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

This comment has been minimized.

gensc004 commented Jul 12, 2017

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

This comment has been minimized.

doque commented Jul 12, 2017

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

This comment has been minimized.

gensc004 commented Jul 12, 2017

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

@doque

This comment has been minimized.

doque commented Jul 13, 2017

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

@ninsy

This comment has been minimized.

ninsy commented Jul 13, 2017

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

This comment has been minimized.

kylebebak commented Jul 13, 2017

@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

This comment has been minimized.

doque commented Jul 14, 2017

@kylebebak what's your workaround?

@kylebebak

This comment has been minimized.

kylebebak commented Jul 17, 2017

@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

This comment has been minimized.

colin-han commented Aug 7, 2017

@kylebebak what's your workaround? :-)

@untoldone

This comment has been minimized.

untoldone commented Nov 30, 2017

@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

This comment has been minimized.

arronhunt commented Dec 25, 2017

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

@QuantumInformation

This comment has been minimized.

Contributor

QuantumInformation commented Dec 26, 2017

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

@ericketts

This comment has been minimized.

ericketts commented Jan 17, 2018

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

This comment has been minimized.

leturtle commented Jan 24, 2018

Finally, we found a solution - Haul.

And here is an example project

@MPiwowarski

This comment has been minimized.

MPiwowarski commented Feb 14, 2018

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

@ericketts

This comment has been minimized.

ericketts commented Feb 14, 2018

@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

This comment has been minimized.

MPiwowarski commented Feb 14, 2018

@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

This comment has been minimized.

ericketts commented Feb 14, 2018

@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

This comment has been minimized.

MPiwowarski commented Feb 15, 2018

@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

This comment has been minimized.

AndrewSouthpaw commented Mar 13, 2018

@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

This comment has been minimized.

ericketts commented Mar 14, 2018

worth noting that this hack my break soon

@AndrewSouthpaw

This comment has been minimized.

AndrewSouthpaw commented Mar 14, 2018

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

This comment has been minimized.

ericketts commented Mar 15, 2018

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

This comment has been minimized.

AndrewSouthpaw commented Mar 15, 2018

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

This comment has been minimized.

AndrewSouthpaw commented Mar 15, 2018

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

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.