React native Typescript path alias unable to resolve module

Question

so basically, I created my React Native with Typescript using the commandline in RN homepage: npx react-native init MyApp --template react-native-template-typescript

After that, I ran the project and it was built successfully. However, when I added the path alias to import my file, it threw an error: Unable to resolve module #folder/file from ... could not be found within the project or in these directories: node_modules

I've already followed some tutorials and bug resolves on Google but I've met no luck.

Here is my .babelrc file (I tried to change the file from babel.config.js to .babelrc as some resolver said but it still didn't work)

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx",
          ".android.js",
          ".android.tsx",
          ".ios.js",
          ".ios.tsx"
        ],
        "alias": {
          "#src/*": [
            "./src/*"
          ],
          "#configs/*": [
            "./src/config/*"
          ],
          "#actions/*": [
            "./src/redux/actions/*"
          ],
          "#reducers/*": [
            "./src/redux/reducers/*"
          ],
          "#store/*": [
            "./src/redux/store/*"
          ]
        }
      }
    ]
  ]
}

tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext", 
    "module": "commonjs",
    "lib": [
      "ES2017",
      "DOM",
      "ES2015",
      "ES2015.Promise"
    ], 
    "allowJs": true, 
    "jsx": "react-native",
    "noEmit": true, 
    "incremental": true,
    "importHelpers": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": ".", 
    "paths": {
      "#src/*": [
        "src/*"
      ],
      "#configs/*": [
        "src/config/*"
      ],
      "#actions/*": [
        "src/redux/actions/*"
      ],
      "#reducers/*": [
        "src/redux/reducers/*"
      ],
      "#store/*": [
        "src/redux/store/*"
      ]
    }, 
    "types": ["jest"],
    "allowSyntheticDefaultImports": true, 
    "esModuleInterop": true, 
    "skipLibCheck": false, 
    "resolveJsonModule": true 
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

My folders and files structure

├───assets
├───components
├───config
│       constants.ts
│
└───redux
    ├───actions
    │       index.ts
    │       stateActions.ts
    │
    ├───reducers
    │       index.ts
    │       stateReducer.ts
    │
    └───store
            index.ts

Really looking forward to receive you guys answers. Thank you so much

P/s: if you dont mind, please take a look at my repository: https://github.com/NotJackieTruong/rn_test_typescript

@Thor0o0 the solution that worked for me was to remove /* from all of the aliases and directories. ¯\_(ツ)_/¯ — Abe
– Abe, Commented Nov 24, 2022 at 4:44

deathangel908 · Accepted Answer · 2023-07-18 23:02:14Z

21

For expo v49+:

module-resolver is not required, you can remove it from babel-config
Add to app.json:

{
  "expo": {
    "experiments": {
      "tsconfigPaths": true
    }
  }
}

Define paths as usual in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "extends": "expo/tsconfig.base"
}

answered Jul 18, 2023 at 23:02

deathangel908

9,81711 gold badges54 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yilmaz · Accepted Answer · 2021-11-27 14:34:51Z

5

tsconfig.json

 "baseUrl": ".", 
 "paths": {
      
      // this is for src directory
      "@*": ["src/*"],
      "@configs/*": ["src/config/*"
      ],

babel.config.js

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ["babel-preset-expo"],
        plugins: [
            [
                "module-resolver",
                {
                    alias: {
                        "@config": "./src/config",
                         ....
                        
                    }
                }
            ]
        ]
    };
};


        }

answered Nov 27, 2021 at 14:34

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

Comments

AndreyProgr · Accepted Answer · 2021-11-27 02:26:51Z

4

To make this work just need add package.json file to each directory you want to access with one property name in it. For example:

├───assets
└───components
    └───package.json

package.json content:

{
  "name": "components"
}

And then you can import like this:

import SomeComponent from 'components/SomeComponent';

There is also a good article describing how this works.

answered Nov 27, 2021 at 2:26

AndreyProgr

6926 silver badges18 bronze badges

5 Comments

jackieTruong123 Over a year ago

Thank you for your reply, but I have to add package.json to each directory every single time I add new components? It doesnt sound like a good method... But anyway, I appreciate your answer.

jackieTruong123 Over a year ago

I'd also love to know why my config doesnt work and be looking forward to more practicle solutions

jted95 Over a year ago

interesting, but I think it will be a bit redundant if we can do it without package.json on every directory.

AndreyProgr Over a year ago

From my experience I usually add package.json to several directories under source folder. For example assets, components, utils. These folders are very stable during whole project lifecycle.

nima Over a year ago

I define a package.json in the root directories (under src directory) and it's working very well without any extra packages or configs. thank you.

mirsahib · Accepted Answer · 2022-12-19 04:32:53Z

4

In tsconfig.json


{
...
   "compilerOptions":{
        ...
       "baseUrl":"."
       "paths":{
            "@folder": "src/folder" <--assuming app logic is in src/ 
        }
   }
}

In babel.config.js

module.exports = {
...
  plugins: [
    ["module-resolver",{
      "alias":{
        "@folder": "./src/folder",
      }
    }]
  ],
};

Uninstall the app from emulator/device

Restart the metro server yarn start --reset-cache

Build the app yarn run android/ios

answered Dec 19, 2022 at 4:32

mirsahib

4452 gold badges5 silver badges13 bronze badges

Comments

jted95 · Accepted Answer · 2021-11-27 05:49:38Z

3

add this to your tsconfig.json

"include": ["./src/**/*"]

then restart your TypeScript Server

Cmd+Shift P then choose TypeScript: Restart TS server

Edit: this is the tsconfig.json I'm using if that helps

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmit": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es6", "dom", "esnext"],
    "moduleResolution": "node",
    "baseUrl": ".",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "paths": {
      "@app/*": ["./src/*"]
    }
  },
  "include": ["src/**/*", "./App.tsx"],
  "extends": "expo/tsconfig.base"
}

edited Nov 27, 2021 at 5:49

answered Nov 27, 2021 at 3:23

jted95

1,1641 gold badge10 silver badges23 bronze badges

7 Comments

jackieTruong123 Over a year ago

thank you, but it still not working... I've already cleared cache, restarted the metro server, typescript but still met no luck

jackieTruong123 Over a year ago

the weird thing is that when I import the file, vscode still recommends the right directory and when I click to it, it brings me to the right component.

jted95 Over a year ago

@jackieTruong123 by right directory, does it use the path you specified in the config? btw, I put my tsconfig.json there for reference. I don't know why yours doesn't work, but let me know if you find the solution.

jackieTruong123 Over a year ago

I tried to delete the paths or point to the wrong ones in the config file and it show import errors, so I assume that it uses my path specified in the typescript config

jackieTruong123 Over a year ago

I added my repository to the questions. If you dont mind, please take a look and help me, please. Thank you.

|

shehan chanuka · Accepted Answer · 2023-07-14 12:31:48Z

2

In my case I was not using expo. I initiated my project using npx react-native init <App name>--template react-native-template-typescript. I ran into issues once I added path aliases to my .babelrc and tsconfig.js. I tries several instructions but nothing worked. My successful attempt was.

Deleted node_modules and yarn.lock
Converted babel.config.js into .babelrc. (Cannot gaurantee if this had to do with the success).
Uninstalled the app from the emulator
Ran yarn to install all the dependencies.
Ran yarn start --reset-cache to install and run the app while removing the metro-cache.

answered Jul 14, 2023 at 12:31

shehan chanuka

1533 silver badges12 bronze badges

Comments

Ahmed Younes · Accepted Answer · 2022-12-30 08:59:07Z

For those who still stuck with the issue with all solutions you have just make sure the following:-

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

or

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

babel.config.js or .babelrc

make sure this is development not production in babel <<<<<<<<<<<<< VIP

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
  env: {
    development: { // <<< make sure this is development not production
      plugins: [
        'react-native-paper/babel',
        [
          'module-resolver',
          {
            root: ['./src'],
            extensions: [
              '.js',
              '.jsx',
              '.ts',
              '.tsx',
              '.android.js',
              '.android.tsx',
              '.ios.js',
              '.ios.tsx',
            ],
            alias: {
              '@hooks': ['./src/hooks'],
              '@familyway': ['./src'],
              '@assets': ['./src/Assets'],
              '@components': ['./src/Components'],
              '@constants': ['./src/Constants'],
              '@helpers': ['./src/helpers'],
              '@onboarding': ['./src/onBoarding'],
              '@redux': ['./src/redux'],
              '@screens': ['./src/Screens'],
              '@lib': ['./src/lib'],
              '@containers': ['./src/containers'],
            },
          },
        ],
      ],
    },
  },
};

ok now with the tsconfig.json


{
  "compilerOptions": {
    "target": "ES2022",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "esnext.asynciterable",
      "esnext.intl",
      "esnext.symbol",
      "esnext.array"
    ],
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "noImplicitAny": true,
    // "noImplicitReturns": true,
    // "noImplicitThis": true,
    "esModuleInterop": true,
    "alwaysStrict": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "incremental": true,
    "noEmitOnError": true,
    "baseUrl": "./src",
    "paths": {
      "@hooks/*": ["hooks/*"],
      "@components/*": ["Components/*"],
      "@assets/*": ["Assets/*"],
      "@screens/*": ["Screens/*"],
      "@constants/*": ["Constants/*"],
      "@helpers/*": ["helpers/*"],
      "@onboarding/*": ["OnBoarding/*"],
      "@redux/*": ["redux/*"],
      "@containers/*": ["containers/*"],
      "@lib/*": ["lib/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "additional.d.ts",
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.tsx",
    "./App.tsx",
    "./src/**/*",
    "src/**/*",
    "src/**/*.*"
  ],
  "exclude": ["node_modules"]
}

mehmetdemiray · Accepted Answer · 2023-05-20 14:23:35Z

0

After long efforts and trials, I was able to make the path alias work with "@" as follows;

Note: My all codes in src directory.

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '@': './src'
        }
      }
    ]
  ]
};

tsconfig.json

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  },
  "include": ["src"]
}

answered May 20, 2023 at 14:23

mehmetdemiray

1,1364 gold badges15 silver badges34 bronze badges

Comments

Jam Nguyen · Accepted Answer · 2025-02-19 12:59:16Z

I encountered this. I set alias @/ for src/* and everything worked well until I installed Redux Toolkit. I searched for 6 hours and turned out that the folder name redux is the root cause. Changing to src/store worked for me.

I used bare RN 0.77.0, @reduxjs/toolkit 2.5.1 and react-redux 9.2.0.

// tsconfig.json
{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

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

Collectives™ on Stack Overflow

React native Typescript path alias unable to resolve module

9 Answers 9

Comments

Comments

5 Comments

Comments

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

5 Comments

Comments

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related