Babel-plugin-module-resolver: Not working with React Native Android project (RN 0.42)

[ozzyknox]

I am working on a project with ReactNative version 0.42 for an Android app, using the Android Studio emulator. I have followed the setup instructions and also have a .babelrc file with the following:

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

No matter what I try, including react-native start -- -reset-cache, I still get the following:

[cKurultayKalkan]

+1

[ozzyknox]

Hi,

I am still getting this problem. I am developing on Windows 10. My team mate is developing on Linux and he is able to get this to work, but for some reason this is not working with React Native Packager on Windows 10.

Any assistance?

[cKurultayKalkan]

We resolved problem after change versions to : "react": "16.0.0-alpha.6", "react-native": "0.43.3",

[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.

[johndanek]

Does not appear to work for me, even with 3.0.0-beta.0

I get the same error as in @ozzyknox's image. It's trying to resolve through node_modules/react-native/packager

Here is my .babelrc:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "root": ["./App"],
      "alias": {
        ":components": "./Components"
      }
    }]
  ]
}

[pokonski]

Same issue even with latest versions ("react": "16.0.0-alpha.6", "react-native": "0.43.3"), it keeps looking inside node_modules and the plugin seems to be ignored completely.

[Aggie123]

Same issue with latest version,("react": "16.0.0-alpha.6", "react-native": "0.44.0"),alert error, checked that it keeps looking inside node_modules.
"presets": ["react-native"],
"plugins": [
["module-resolver", {
"root": ["./libraries"],
"alias": {
"mjuicomponents":"./libraries/components",
"mjuibase":"./libraries/components/_base",
"mjuistyle":"./libraries/style",
}
}]
]
}
`

[maoueh]

We are using react-native 0.42.0 and module resolver works here. Hierarchy:

├── common
│   ├── src
│   ├── .babelrc
├── mobile
│   ├── android
│   ├── ios
│   ├── src
│   ├── .babelrc
└── web
    ├── src
    ├── .babelrc

And web/.babelrc (referencing common sources via an npm link common):

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@common": "common/src",
        "@mobile": "./src"
      }
    }]
  ],
  "sourceMaps": true
}

We seen this error and usually it's possible to fix it by resetting the packager cache. Kill all running instances of the packager terminal window and restart it with:

yarn start -- --reset--cache

The first double dashes is not a typo.

[Obooman]

Checked npm start -- --reset-cache and it works for me.

[kimjuny]

Hi, I'm also using 0.42.3, I tried to add 'cwd' according to this https://github.com/tleunen/babel-plugin-module-resolver/issues/184, and tried to use 3.0.0-beta.0 as @tleunen says, but it did not helped(still resolve path into react-native/packager). Unfortunately, I cannot easily upgrade my environment to recommended React-Native 0.44 or above, and neither can I easily adjust my hierarchy like @maoueh did. So.. Is there any way to solve this problem if I'm sticked with 0.42.3?

[hssrrw]

3.0.0-beta.4 doesn't work for me, reinstalling deps and clearing cache doesn't help.

Does anyone know a way to avoid imports like '../../../../../' in RN other than using this plugin? fbjs's @providesModule is not very convenient 😕

[fatfisz]

@hssrrw Your comment about another plugin is a bit inappropriate. This is a thread to discuss the issue RN has with this plugin. If you don't want to contribute to fixing the problem with this plugin, then StackOverflow or RN discussion groups are a better to search for alternatives.

[hssrrw]

@fatfisz I am sorry. I didn't mean anything. Just asked out of curiosity. You are right this thread is not the place. I'd love to contribute after I learn how babel plugins work internally.

[tleunen]

I'm sorry for everyone having issues with this plugin and React Native. I'm not currently a user of React Native so I can't really help. I'll greatly appreciate any help improving the plugin to make it work with RN without any weird tricks.

[gpeal]

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

[ajostergaard]

It's working for me on 0.46.1 - seems to me more likely that any problems with this plugin are due to the RN packager or babel itself, I believe this view is supported by the fact that most of the 'fixes' simply involve refreshing the packager cache.

[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

Also closing to clear a bit all these RN issues. Please reopen a new ticket if needed.

[deot]

@maoueh Thanks

[dclipca]

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