Neat and Clean way to imports modules using module resolver in React Native typescript support

Neat and Clean way to imports modules using module resolver in React Native typescript support

Let’s consider an example

import BitFritModule from '../../../BitFritModule'

The above can be simplified into:

import BitFritModule from 'components/BitFritModule'

// similarly

import BitFritModule from '@components/BitFritModule'
  
  

And if you have configured an index.ts, it’s like a cherry on top

import { BitFritModule } from '@components'

Getting started

yarn add --dev babel-plugin-module-resolver

# or if you use npm

npm install --save-dev babel-plugin-module-resolver

After installing the plugin we need to update babel.config.js (you can also use .babelrc) and add ‘module-resolver’ to the list of babel plugins.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '*': '.',
          '@root': './',
          '@src': './src',
          '@components': './src/components',
        }
      }
    ]
  ]
};

• root specifies your project main directory. Usually, it is called ‘app’ or ‘src’.
• extensions allows you to limit the plugin to specific file types.

• alias lets you specify all the folders you need shortcuts for your module imports.

  If you are working with typescript then add the following fields to your tsconfig.json(Isn’t typescript just awesome?)

  {
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
   "paths": {
    "*": ["./*"],
    "@root/*": ["./*"],
    "@src/*": ["src/*"],
    "@components/*": ["src/components/*"]
    }
  }
  }

  Note: Please make sure to put the paths into square brackets []. Otherwise, TypeScript won’t be able to locate the paths properly.

  • Running the project

  After setting up the plugin, we now need to make sure it’s working.
  Before you start changing your imports we need to do the following:

  • Cleaning build folders for android and ios

  rm -rf ios/build android/app/build

  • Resetting cache for npm or yarn

  yarn start -c
  
  # or if you use npm
  
  npm start --reset-cache

  Now you should be able to build your project and start changing the import.

  Note: If you are still facing the issue with cache, recheck your babel.config.js and tsconfig.json and try the command below to clear watchman.

  watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start --reset-cache

  
  Ref by : https://dev.to/karanpratapsingh/cleaning-up-imports-using-module-resolver-in-react-native-58g8