Relative paths with Expo

[andrea]

Hi!

I have created my expo app with CRNA and have quite bigg app with a lot of files in different folders etc. I have been trying to get reallative paths to work very unsuccessfully. I have tried to work with babel-plugin-module-resolver, module-alias, have tried to specify where to find all relevant files in the flowconfig file with “module.system.node.resolve_dirname” but nothing works!! I want to be able to import like this:

import someModule from "framework/path/to/someModule"
instead of :
import someModule from “…/…/…/…/framework/path/to/someMododule”

how can I do this??

[wwwillchen]

I used the module-resolver plugin and was able to get it work.

This is the relevant part of my babelrc file:

  "plugins": [
    [
      "module-resolver",
      {
        "root": [
          "./build"
        ]
      }
    ]
  ],

[andrea]

I managed to make it work but like this:

{
“presets”: [“babel-preset-react-native-stage-0/decorator-support”],
“env”: {
“development”: {
“plugins”: [“transform-react-jsx-source”]
}
},
“plugins”: [
[“module-resolver”, {
“alias”: {
“framework”: “./source/framework”,
“application”: “./source/application”,
“common”: “./source/common”,
“typings”: “./source/typings”

  }
}]

]
}

I could not define a root and i hade to change the preset from “babel-preset-expo” to the above. Any idea why??

[arcomito]

@andrea or @wwwillchen have you changed your setups at all?

What are the additional packages to download and the babelrc file looking like?

Saw this as well:

Change project file structure and stop using relative paths

Move everything to /src Create an /src folder within your expo project folder. Then in the App.js you load your Main.js file from the /src folder /App.js import React from 'react'; import Main from './src/Main'; const App = () => ( <Main /> ); export default App; In the /src/Main.js you can call all your other React Native components from this folder with import MyStore from './stores/MyStore'; While the structure is /src/stores/MyStore Relative paths (via Module-Resolver) If you h…

@notbrent (or relevant person), would it be possible to add a quick section to the docs on the recommended way to setup relative paths? It’d be great if expo could choose one “officially recommended” way to go about it. I’ve seen differing things across the forums, slack and github issues that have me stuck in research/options paralysis for something I’m sure is a 10 minute thing if you know the bet route.

[notbrent]

heya @arcomito - I personally don’t think it is such a hassle to require things with relative paths in a normal sized app, but I agree in a large app (bigger than Expo’s, for example: https://github.com/expo/expo/tree/master/js) this would be irritating. I don’t know that it’s really Expo’s place to recommend a specific technique for this – generally whatever you would do with other JavaScript projects that use babel should just work with Expo as well. If you want to use a technique that you have see elsewhere and it doesn’t work, feel free to open an issue as it is quite possibly a bug.

[willhlaw]

It appears that the latest expo, SDK 24, works when adding the module-resolver plugin in .babelrc and keeping the ‘babel-preset-expo’ preset.

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

[alimaster]

Hi there

Why you have used the module-resolver just in development mode so? if we wanna make a build in production mode, then I will resolve some errors depended on paths.