Create-react-native-app: Releasing apk with babel aliases (module resolver)

Created on 20 Feb 2018  路  1Comment  路  Source: expo/create-react-native-app

Hello there.

Description

I am using https://github.com/tleunen/babel-plugin-module-resolver to use handy aliases for my project (i.e import { something } from '@common/something'). This is working great during development, however when I want to release an .apk aliases aren't taken into consideration and an error occurs.

Expected Behavior

I was hoping for a success release of .apk file while still maintaining my aliases.

Observed Behavior

So basically it stops at the first use of alias in the tree.

Unable to resolve module `@config/store` from `/home/ppozniak/Projects/project_path/src/Root.js`: Module does not exist in the module map

Additonal info

.babelrc

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

OS: Ubuntu 17.10

Reproducible Demo

  1. Add https://github.com/tleunen/babel-plugin-module-resolver to the project
  2. See a example configuration above
  3. Use aliases in project
  4. Try to relase an android apk (signed) with cd android && ./gradlew assembleRelease && cd ..

Most helpful comment

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

>All comments

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"
      }
    }]
  ]
}
Was this page helpful?
0 / 5 - 0 ratings