Create-react-native-app: Are other module roots in addition to node_modules possible?

[kay-is]

Description

I have a few shared modules in my system and have to link them from many files. Often I have to write things like import theme from "../../../theme"; which also breaks when I move the target file.

Expected Behavior

I want to add an additional module root for the RN bundler, so I don't have to use relative paths for modules that are used all over the app.

Observed Behavior

I didn't find configuration options for this. :(

[anp]

I think for this to work you need to do a little work with rn-cli.config.js, and then specify it in app.json under expo.rnCliPath. Unfortunately, I think the multiple roots options for the RN packager are not currently documented. I think you'd need something like this: https://gist.github.com/bokuo-okubo/aec182cd83ce15b3923b#file-rn-cli-config-js-L39

cc @skevy who has worked on the packager in the past if memory serves.

[kay-is]

I see, thanks.

So I have to create my own and link it in the app.json?

Is the one you linked the default one or do I have to get it from somewhere else?

[anp]

The one I linked is just an example. You may also try passing extra project roots in app.json's exp.packagerOpts.projectRoots field -- I think that might be necessary to take precedence over arguments we pass when invoking the packager.

[kay-is]

This seems to work partly.

Failed to build DependencyGraph: Expected file to be absolute path but got ./src/theme.js
Error: Expected file to be absolute path but got ./src/theme.js

I have to enter an absolute path in the app.json, but it's dev-environment dependant, so I don't know it in advance.

[anp]

Ah yes, using an absolute path in a file you commit is definitely an issue. I wonder if we should offer some kind of env var-driven config for this? cc @jesseruder

Or maybe a local config file that is gitignored? Not sure how well that'd work without introducing some kind of template language into app.json.

[jesseruder]

I think we'll eventually need a way to replace app.json with a script. Maybe for now you can gitignore app.json and run a script to generate it with the absolute path?

[kay-is]

Hm okay.

I think I'll run it before the npm start

[kay-is]

Meh, doesn't work.

The packager always appends node_modules at the end of the absolute path.

[vvasilev-]

If someone is still looking for imports with absolute paths probably this will help.

Since babel-preset-expo uses babel-plugin-module-resolver, we can modify the .babelrc file to looks like:

{
  "presets": ["babel-preset-expo"],
  "plugins": [
    ["babel-plugin-module-resolver", {
      "root": ["./src"]
    }]
  ],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

This way we can use utils/something.js instead of ../utils/something.js.

[kay-is]

Yay, this seems to work.

Thank you!

[kay-is]

@vvasilev- is there a reason why this doesn't work after an eject?

I installed the plugin manually and added it to the .babelrc, but somehow it doesn't get used, I always get the error that the modules I want to import are not inside "node_modules"

[vvasilev-]

@kay-is, Could you post more information about your setup?

I tested the code above with an ejected version of a fresh project and everything works.

[kay-is]

Yes, but what information do you need?

[kylebebak]

Solution from @vvasilev- works great, just suggesting it should be documented somewhere. Absolute imports are a game changer!