How do I configure absolute paths for imports in TypeScript based React Native apps?

Question

In order to avoid '../../../../' style relative imports in a TypeScript based React Native app, I would like to configure the app so that I can use absolute imports instead.

It is important that the configuration also supports Jest unit tests.

I created the app using npx react-native init MyTestApp --template typescript

React Native version: 0.60.5

What is the exact configuration I would need to achieve this?

Answer 1

Requirement

// Meh import config from '../../../../../../../config';  // Awesome! import config from '@cuteapp/config'; 

How To

1. Add this babel plugin package

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

2. My babel.config.js

module.exports = {   presets: ['module:metro-react-native-babel-preset'],   plugins: [     [       require.resolve('babel-plugin-module-resolver'),       {         cwd: 'babelrc',         extensions: ['.ts', '.tsx', '.js', '.ios.js', '.android.js'],         alias: {           '@cuteapp': './app'         }       }     ],     'jest-hoist'   ] }; 

3. My tsconfig.json

{   "compilerOptions": {     "allowJs": true,     "allowSyntheticDefaultImports": true,     "esModuleInterop": true,     "isolatedModules": true,     "jsx": "react",     "lib": ["es2015", "es2015.promise", "es2016.array.include", "dom"],     "strict": true,     "moduleResolution": "node",     "baseUrl": "./",     "paths": {       "@cuteapp/*": ["app/*/index", "app/*"]     },     "noEmit": true,     "resolveJsonModule": true,     "target": "esnext",     "types": ["jest"]   },   "exclude": ["node_modules", "babel.config.js", "metro.config.js"] } 

4. Restart the IDE.
5. That's it.

Answer 2

Summary:

The npm package babel-plugin-module-resolver is needed, as well as some configuration in tsconfig.json and babel.config.js

---

Step by step:

1. Install babel-plugin-module-resolver using npm or yarn.

   npm i babel-plugin-module-resolver --save-dev  # Or (If you're using yarn):  yarn add --dev babel-plugin-module-resolver 

2. tsconfig.json: Add "baseUrl": "." to compilerOptions

3. babel.config.js: Add a key named plugins with the following value:

[     [       'module-resolver',       {         extensions: [           '.js',           '.jsx',           '.ts',           '.tsx',           '.android.js',           '.android.tsx',           '.ios.js',           '.ios.tsx'         ],         root: ['.']       }     ]   ] 

---

Complete configuration:

tsconfig.json:

{   "compilerOptions": {     "allowJs": true,     "allowSyntheticDefaultImports": true,     "esModuleInterop": true,     "isolatedModules": true,     "jsx": "react",     "lib": ["es6"],     "moduleResolution": "node",     "noEmit": true,     "strict": true,     "target": "esnext",     "baseUrl": "."   },   "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"] } 

babel.config.js:

module.exports = {   presets: ['module:metro-react-native-babel-preset'],   plugins: [     [       'module-resolver',       {         extensions: [           '.js',           '.jsx',           '.ts',           '.tsx',           '.android.js',           '.android.tsx',           '.ios.js',           '.ios.tsx'         ],         root: ['.']       }     ]   ] };  

This is for a clean new project created using npx react-native init MyTestApp --template typescript on React Native version 0.60.5