Babel-plugin-module-resolver: Can't get it to work in React Native

[mschipperheyn]

Works

import { FullScreen } from '../../styles/CommonStyles';

Unable to resolve module 'styles/CommonStyles [...]. Module does not exist in the module map or in these directories: [projectdir]/node_modules/styles

import { FullScreen } from 'styles/CommonStyles';

BTW, there is no node_module calles 'styles'

.babelrc

{
  "sourceMaps": true,
  "presets": [
      "react-native"
  ],
  "plugins": [
    ["module-resolver", {
        "root": ["./src"]
    }]
  ]
}

[thabti]

I am also getting an error with RN:

babelrc:

{
    "presets": [
        "react-native"
    ],
    "plugins": [
         "react-require",
        [
            "module-resolver",
            {
                "root": [
                    "./src"
                ],
                "alias": {
                    "styles": "./styles",
                    "actions": "./actions",
                    "containers": "./containers",
                    "components": "./components"
                }
            }
        ]
    ]
}

[tleunen]

Out of curiosity, could you please try with the new beta version I just released 3.0.0-beta.0?

I'm not an active user of react-native yet so I cannot really test myself.

[yustnip]

@tleunen I have the error with 3.0.0-beta.0.

[jpaas]

I'm also having this problem with 3.0.0-beta.0 and React Native 0.44.0. In my case I have a npm module I depend on that I've symlinked using yarn link core-module.

My .babelrc:

{
"presets": ["react-native"],
"plugins": [
  ["module-resolver", {
    "root": ["./src", "./node_modules/core-module/src"],
    "extensions": [".js", ".jsx"]
  }],
]
}

I end up with this error: error: bundling: UnableToResolveError: Unable to resolve module../../node_modules/core-module/src/services/loggerfrom.../src/app/App.js: Directory .../node_modules/core-module/src/services/logger doesn't exist

[kulor]

I'd love for this to work with React Native but hitting same issues as above. Has anyone had any joy with this as it's been a couple of months since last message.

[gpeal]

@tleunen This used to work as of RN 0.41 but something broken between that and 0.46.

[gpeal]

I was able to get this to work by changing prepending my babelrc root with ../../. It used to be ./lib and now it's ../../lib

[ptboyer]

I'm also getting this error, despite it previously working just fine.

Last working with React Native 0.44.3 with peer React 16.0.0-alpha.6.

I suspect something must've changed in the way React Native's dev server handles external babel configurations? It's almost as if they're ignoring it?

[JesperLekland]

it works fine for me and has for a few weeks now. What you need to do after fiddling with the .babelrc is to run react-native start -- --reset-cache

[sercanov]

I need to run with --reset-cache almost every time, there might be some issue beneath it.

[JesperLekland]

I actually found that the absolute simplest solution for React Native is to skip the babel plugin transformer/resolver all together. All you need to to is place a package.json, in the directory you want to alias, with the content

{
"name" : "foo" 
} 

And then you can simply do
import x, {y} from 'foo'

[tleunen]

Could you test again with [email protected]? We landed a fix for the extensions. Please read this too: https://github.com/tleunen/babel-plugin-module-resolver#usage-with-react-native

[MichaelIT]

Yes, It work @tleunen with beta.5.

{
  "presets": ["react-native"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd-mobile"
      }
    ],
    [
      "module-resolver",
      {
        "root": ["./app"],
        "extensions": [".js", ".ios.js", ".android.js"]
      }
    ]
  ]
}

[dpikt]

I'm still getting an UnableToResolveError with the above config and the most recent version.
Config:

{
  "presets": ["react-native", "react-native-dotenv"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd-mobile"
      }
    ],
    [
      "module-resolver",
      {
        "root": ["./src"],
        "extensions": [".js", ".ios.js", ".android.js"]
      }
    ]
  ]
}

Versions:
"react-native": "0.47.1"
"babel-plugin-module-resolver": "3.0.0-beta.5"

I've got a styles folder in the src directory that I'm trying to import using import Styles from 'styles', but it's not being found.

I'd love to use this plugin to alias imports in my RN project but for now I've resorted to using the providesModule strategy outlined in this post.

[gvost]

hey all, i did the following
added:

{
  "root_files": "init.js"
}

to my .watchmanconfig and it worked, leading me to believe that the best way to get this to work is to declare a file in your root alias directory.

my .babelrc looks like this:

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source"
      ]
    }
  },
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@app": "./src/js/app.js",
        "@styles": "./src/js/styles",
        "@components": "./src/js/components",
        "@images": "./src/images",
        "@fonts": "./src/fonts"
      }
    }]
  ]
}

i am using "babel-plugin-module-resolver": "^2.7.1" using [email protected] and [email protected]

i hope that helps anyone who is having troubles with this.

[eballeste]

was not working for me using [email protected] for an ios app, assuming that running npm start -- clean-cache was all I had to do...

in my case I had to completely close the ios simulator and then run react-native run-ios again to get things working

{
   "presets": ["react-native"],
   "plugins": [
    [
      "module-resolver", {
        "cwd": "babelrc",
        "root": ["./App"]
      }
    ]
  ]
}

[eugene-kim]

I still haven't gotten this working. Have there been any updates on this?

[fatfisz]

Not really - for example I don't have any experience with React Native and it would take a lot of time for me to get into it just so I could investigate this issue (I tried doing it, but in the end failed). AFAIK the rest of the maintainers also doesn't have time for this, so it would be really nice if someone from the community that is actually using React Native could volunteer their time to work on this.

We'd like to have this investigated, as this is a long-standing issue. We just don't have the budget for this. If anyone wants to help us, you'd be very welcome.

[cayasso]

For those who are trying to make this work, I was having the same problem, and it worked when I changed my root directory name from ./src to ./app I suspect that something is clashing with the ./src directory. My setup is now simple this:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
        "cwd": "babelrc",
        "root": ["./app"]
      }
    ]
  ]
}

instead of this:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
        "cwd": "babelrc",
        "root": ["./src"]
      }
    ]
  ]
}

This is how my package.json looks like.

[wswoodruff]

Changing my main folder from src to app fixed issues on Android for me -- previously it just worked on iOS (using "babel-plugin-module-resolver": "^3.0.0-beta.5")

[Geono]

Changing my main folder from src to app also worked for me. Thanks :)

[joaozitopolo]

I tried all alternatives, and the unique functional react-native alternative is the @JesperLekland package.json with name...
Thank you!!!

[donnior]

@JesperLekland 's solution works

[Asgator]

@cayasso thx you =*

[mtnptrsn]

@cayasso 's works but why is this the case? What is causing src to not work? This is working on my machine but not on my colleagues.

[centrodph]

Thanks @JesperLekland , your solution works fine

[dclipca]

I would suggest using this with React Native:
https://medium.com/beqode/fixing-import-path-hell-react-native-eslint-vs-code-3d04de9762b6