Using Module Aliases in React and React Native

Have you even hate your Javascript projects have a complex folder structure and you have to write import something from '../../../../forever'the long ugly related path in the projects. This article shows you how to solve that with module alias in React and React Native.

1. React Native

1.1 Method 1: By package.json

Using module alias in React Native is pretty easy. Actually, you already have one. The namein package.json in the project root is a module alias.

For example, when we create a new React Native project and the name of the project is MyRnApp, like this command.

npx react-native init MyRnApp

Then we can write import name from 'MyRnApp/path_to_module_from_root'. For example, we have a utils module on/src/utils, then we can write import utils from 'MyRnApp/src/utils'.

Furthermore, we can create any package.json under a folder as module alias. Like the folder structure is used on my projects.

Project
├── src
│   ├── modules
│   ├── utils
│   │   └── date.ts
│   └── package.json
├── index.js
└── package.json

And the content of /src/package.json is

{
  "name": "app"
}

Therefore, I can write import dateUtils from 'app/utils/date' in other modules.

🔔NOTE: This feature is provided by metro-react-native-babel-preset which is defined in babel.config.js(I guess metro-resolveris the real package to resolve modules, but I haven’t dug in to confirm)

1.2 Method 2 — By metro.config.js

If you don’t like to create many package.json, then you can define the alias in metro.config.js(created by React Native CLI already), For example,

module.exports = {
  resolver: {
    extraNodeModules: {
      app: `${__dirname}/src`,
    },
  },
  // other configs
};

1.3 Typescript supports

Typescript and IDE like VS Code cannot know we use module alias in the projects. We need to add baseUrlandpathsin tsconfig.json, like bellow

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "app/*": [
        "src/*"
      ]
    },
    // other configs
  }
}

🔔 NOTE: I don’t know when Metro provided this feature. However, I used this feature since 0.57.

2. React

Although React and React Native are both created by Facebook, the two frameworks have different build systems. React uses webpack and Babel If the project is created by Create React App (aka CRA). I haven’t found an easy way to apply module alias. We need to eject or use customize-cra this kind of packages to change Babel or webpack config because CRA doesn’t allow us to overwrite configs.

These commands are an example to create an React project by CRA and eject the project.

npx create-react-app my-app
cd my-app
yarn eject

2.1 Add aliases to ./config/webpack.config.js

After the project is ejected, these files are added to the project.

new files after eject

Open webpack.config.js and search alias (it is on line 291 for react-scripts@3.4.1) and add your alias, like the below image.

add an alias for “app” to path “./src”

2.1 Typescript supports

As React Native, to make Typescript and IDE support module alias. We need to add baseUrlandpathsin tsconfig.json, like bellow

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "app/*": [
        "src/*"
      ]
    },
    // other configs
  }
}

🔔NOTE: If you look at the webpack.config.js, you can see there are some aliases defined already. And the value of modules.webpackAliases is { src: './src' }when baseUrl is provided. Therefore, you can write import utils from 'src/utils' without eject and any config.

There are many other methods to add module aliases, I just show you the easiest ways I think to you. And I don’t want to write too many methods to confuse you (and I am lazy to write😜). If you are inserted other methods, you can google react module alias or react native module alias.

Now you can say good-bye to ugly ../../../.. 😘.