React-native: When using aliases unable to release an .apk (babel-plugin-module-resolver)

[ppozniak]

Is this a bug report?

Yes probably

Have you read the Contributing Guidelines?

Yup.

Environment

OS: Linux 4.13
Node: 9.5.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found (but it's there, the newest version)

Created with create-react-native-app and ejected
Also this is working great in develoment mode.

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.50.3 => 0.50.3

Target: Android (signed .apk)

Steps to Reproduce

1. Get https://github.com/tleunen/babel-plugin-module-resolver
2. Update your alises in .babelrc file like so:

["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"
          }
        }],

1. Set up keystores etc.
2. Run cd android && ./gradlew assembleRelease

Expected Behavior

My .babelrc aliases are used and recognized and apk file is successfully built.

Actual Behavior

An error occurs on the first use of alias

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

More info

May be connected to: https://github.com/facebook/react-native/issues/8723
Probably due to react-native bundle own babel settings, ignoring the one in root of project.

I've tried adding

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

however it seems that --projectRoots option is gone?

Stackoverflow: https://stackoverflow.com/questions/48986918/unable-to-resolve-module-when-building-react-native-apk-babel-plugin-module-re

[ppozniak]

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"
      }
    }]
  ]
}

[dalinarkholin]

@ppozniak Exact same issue here. Thanks for the solve.

[lanlin]

@ppozniak Hey, that's saved my life! Thanks, bro!