I am trying to make a demo app for some components using Expo and react-native. (Or I also could use regular React-Native)

My problem is I cannot import files outside of the demo app

Here is the structure I have
|-- Components/ | |-- libs | |-- node_modules | |-- index.js | |-- package.json | |-- demo/ | | |-- node_modules | | |-- App.js | | |-- package.json

Inside of demo/App.js, I am trying to import one of my components from the upper directory but with no luck. All the components are exported in ./index.js

Inside of App.js, I tried : import {MyComponent} from 'Components', import {MyComponent} from '../index', or import {MyComponent} from '../../Components/' but none seem to work.

I got the following type of error Directory /Users/kevin/web/myprojects/Components/index doesn't exist

What Am I doing wrong ?

I am trying to make a demo app for some components using Expo and react-native. (Or I also could use regular React-Native)

My problem is I cannot import files outside of the demo app

Here is the structure I have
|-- Components/ | |-- libs | |-- node_modules | |-- index.js | |-- package.json | |-- demo/ | | |-- node_modules | | |-- App.js | | |-- package.json

Inside of demo/App.js, I am trying to import one of my components from the upper directory but with no luck. All the components are exported in ./index.js

Inside of App.js, I tried : import {MyComponent} from 'Components', import {MyComponent} from '../index', or import {MyComponent} from '../../Components/' but none seem to work.

I got the following type of error Directory /Users/kevin/web/myprojects/Components/index doesn't exist

What Am I doing wrong ?

• javascript
• import
• react-native
• node-modules

• try explicitly resolving paths in your App.js. Add this line and check again: app.use('/Components', express.static(__dirname + '/Components/')); – Ankit Gomkale Commented Apr 3, 2017 at 9:45
• Thanks, but I am not using express, I am using [expo.io/] – Kevin Amiranoff Commented Apr 3, 2017 at 9:53

5 Answers 5

The way the react-native packager works right now, it's just going to scan the roots of your project and below when creating the JavaScript bundle, so it will be really hard to do this.

You basically just need to put the files under the root of your directory. There are some tools out there for syncing files from another directory into a directory under the root so you could use one of those if you really need to.

Some people are working on ways to make symlinks work with this. Notably, you might look at Haul from Callstack. https://github.com/callstack-io/haul But that isn't integrated into Expo yet.

You could turn the root folder into a local npm package...

1. In the root folder, open package.json
2. Set the name field in package.json
3. Run npm pack.
4. Copy the gz tarball name given at the end of the terminal.
5. Open the directory of your App.js
6. Run npm install ../NAME_OF_TARBALL_THAT_YOU_COPIED
7. In the file, do import {MyComponent} from 'NAME_IN_PACKAGE.JSON'

Take a look into the Metro configurations, the watchFolder is configured there. And according to its specification is what you want!

watchFolders

Type: Array

Specify any additional (to projectRoot) watch folders, this is used to know which files to watch.

Check the link bellow:

https://facebook.github.io/metro/docs/configuration#watchfolders

Be careful !

As I noted in your question, you have 2 node_modules folders

Having more than one node_modules can break the metro's compilation.

To resolve this situation take a look in the resolver.extraNodeModules configuration in metro config.

https://facebook.github.io/metro/docs/configuration/#extranodemodules

You can try update metro.config.js (RN 0.69.3)

 const path = require('path');

 module.exports = {
  transformer: {
    getTransformOptions: async () => ({
     transform: {
      experimentalImportSupport: false,
      inlineRequires: true,
    },
  }),
 },
 // options for reading data outside root react-native folder
 projectRoot: __dirname,
 watchFolders: [path.resolve(__dirname, '../')],
};

Merto config docs https://facebook.github.io/metro/docs/configuration#watchfolders

You can create a rn-cli.config.js file in demo folder and add the following code:

var path = require("path");
var config = {
    watchFolders: [
     path.resolve(__dirname,"../"),
    ]
}
module.exports = config;

Ref: View options in here

After running react-native run-android or react-native start, if you see this, it worked.