Unable to resolve module when building react-native .apk, babel-plugin-module-resolver aliases

Question

I am using babel-plugin-module-resolver to deal with ../../../ hell. In my .babelrc I have:

{
  "presets": [
    "react-native",
    "babel-preset-react-native-stage-0/decorator-support",
    "react-native-dotenv"
  ],
  "env": {
    "development": {
      "plugins": [
        ["module-resolver", {
          "cwd": "babelrc",
          "extensions": [
            ".js",
            ".ios.js",
            ".android.js"
          ],
          "alias": {
            "@assets": "./src/assets",
            "@features": "./src/features",
            "@common": "./src/common",
            "@config": "./src/config",
            "@services": "./src/services"
          }
        }],
        "transform-react-jsx-source"
      ]
    }
  }
}

Example usage: import { Text } from '@common'

And this is all working great in development mode, however when I try to release an Android .apk file with cd android && ./gradlew assembleRelease && cd .. I get an error:

Unable to resolve module @common from /home/ppozniak/Projects/project-name/src/Root.js: Module does not exist in the module map

It seems that gradlew isn't using my .babelrc?

versions

   "babel-plugin-module-resolver": "^3.0.0",
   "babel-preset-react-native": "^4.0.0",
   "react-native": "0.50.3",
   "react": "16.0.0",

Thanks in advance.

score 1 · Answer 1 · answered Feb 26 '18 at 13:11

I suspect that's because when you're executing the gradle task assembleRelease, it also calls the gradle file inside node_modules/react-native/react.gradle. This means that when you're in the dev mode (serving the js bundle through a server) you use your .babelrc file, but when you execute in the release mode it's not actually using babel at all. React native use its own polyfills.

My idea is to pass some extra command args to the react-native bundle command to try to identify your root .babelrc file by modifying the project roots:

So:

Create a new folder in your root project and put babelrc in there (let's call this folder native-config)

Then, on your ./android/app/build.gradle, add this:

project.ext.react = [
    entryFile: "index.android.js", /* Your entry file */
    extraPackagerArgs: "--projectRoots ../../native-config,../../"
]

/* 
 * Make sure this next line is AFTER the above 
 * also, the line below is the command that runs react-native bundle
 * and don't use babel. Each key in the array above is an extra
 * CLI arg 
 */
apply from: "../../node_modules/react-native/react.gradle"

According to this guy, this weirdo projectRoots might do the trick.

Best of luck on this, hope that it gives you at least a sense of what's happening.

Thanks for your reply. However this is sadly not working. It seems that projectRoots option is gone probably? Not quite sure, running `react-native -h` doesn't show it in the list. `error: unknown option `--projectRoots'` is thrown out. `extraPackagerArgs: ["--projectRoots", "native-config"]` that's how I've tried to do it. — Patryk Poźniak, Feb 27 '18 at 12:18

score 1 · Accepted Answer · answered Feb 27 '18 at 14:09

Okay it was just me being silly a little bit. Looking at my .babelrc you can

"env": {
    "development": {

And that was issue. After this some other bugs popped out with Android but eventually I've managed to fix all of them.

So lesson for future: watch for your envs.

My babelrc now:

{
  "presets": [
    "react-native",
    "babel-preset-react-native-stage-0/decorator-support",
  ],
  "plugins": [
    "transform-react-jsx-source", ["module-resolver", {
      "extensions": [
        ".js",
        ".ios.js",
        ".android.js"
      ],
      "alias": {
        "@assets": "./src/assets",
        "@features": "./src/features",
        "@common": "./src/common",
        "@config": "./src/config",
        "@services": "./src/services"
      }
    }]
  ]
}

Unable to resolve module when building react-native .apk, babel-plugin-module-resolver aliases

2 Answers2