Modules resolution does not support relative paths

[GianlucaGuarini]

Description

The modules resolution does not support relative paths out of the project root

Reproduction Steps and Sample Code

In any of index.ios.js or index.android.js

import something from '../file-in-the-parent-directory'

Solution

I have spent hours using symlinks, npm link, changing the project root via cli.config.js projectRoots and last but not least babel-plugin-module-resolver but none of these solutions seems to work properly fine for such a trivial behavior

Additional Information

• React Native version: 0.43.2
• Platform: iOS
• Development Operating System: MacOS
• Dev tools: Terminal + Sublime Text

[ansmonjol]

I think there is a way to tell your project that the default folder name is MyProjectName in RN but I don't really remember how  😕
So you could write

import something from 'MyProjectName/file-in-the-parent-directory'

I think it's auto defined when you init your project with a given name

---

Do you have webpack in your project ?
If yes, you can create some alias to define some folder you'll use a lot (like assets or shared components folder)

It look like this in your webpack config

resolve: {
    ...
    alias: {
      shared: __dirname + '/../src/app/shared',
      src: __dirname + '/../src',
      app: __dirname + '/../src/app',
    },
    ...
  },

[GianlucaGuarini]

react-native uses packager so the webpack configuration has no effect on my project at least for the RN part

Let's say my folder structure looks like this:

  web/
    index.js
    package.json // web dependencies
  native/
    index.ios.js
    package.json // native dependencies
  shared/
    index.js
    package.json // shared dependencies
    stores/
      my-store.js

I can easily use the webpack resolve.modules config to bundle the shared dependencies mapping them under shared/ and I could even resolve the shared node_modules folder.
But with RN it seems to be really hard to let packager resolving the js modules not located under the native folder. I have tried to use npm link but then the code doesn't get transpiled and I don't want to deal with blacklistRE for each custom node module i need to link.
I have tried to add the other folders to projectRoots:

react-native start --projectRoots `pwd`,`pwd`/../shared/node_modules,`pwd`/../shared`

but other weird issues get thrown making no sense for example: Unable to resolve module 'react-native' from /Users/gianlucaguarini/projects/myproject/node_modules/mobx-react/native.js

I don't see any reasonable rock solid solution here for something that was built with the primary goal of sharing components between web apps and native apps. I hope someone could spread some light on this topic thanks.

[vasyas]

I have the same issue with sharing code between web & native apps.
I ended up putting all the sources under the native folder, and setting up webpack to use sources from that folder.

I hope there will be a better way to do it.

[GianlucaGuarini]

I thinks there is no easy fix to this issue since RN uses its own package manager to handle npm dependencies. I will close this issue because there was no useful answer since 1 month and I had to hack stuff all around to let my RN app properly working in a shared web environment (along with other issues not related to the one above). I could only recommend to whoever comes to this issue that if you have enough time and budget for your project prefer always a native approach over an hybrid solution: you can spend much less time and resources building a shared restful server (serving graphql queries or simply json responses) than trying to let your app logic working in 2 different environments without having the either the possibility to share the same node dependencies.