CODEWITHSUNDEEP
javascriptimportreact-nativenode-modules
Kevin Amiranoff
Kevin Amiranoff

Reputation: 14553

React-Native import files outside of main directory

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 ?

Upvotes: 11

Views: 11815

Answers (5)

Renan Borges
Renan Borges

Reputation: 610

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

Upvotes: 3

Andrey Patseiko
Andrey Patseiko

Reputation: 4495

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

Upvotes: 2

Fernando Rojo
Fernando Rojo

Reputation: 3258

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'

Upvotes: 3

Khanh Tran
Khanh Tran

Reputation: 21

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.

Upvotes: 1

theram
theram

Reputation: 5941

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.

Upvotes: 4

Related Questions