react-native-template-typescript: baseUrl in tsconfig is not supported

Expected results

Setting baseUrl in tsconfig.json should enable absolute import paths.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "target": "esnext",
    "baseUrl": "./src",
    "paths": {
      "@assets/*": ["assets/*"]
    }
  },
  "exclude": ["node_modules"]
}

index.ts

import Images from 'assets/images';

Observed results

What happened? This error appears: error: bundling failed: Error: Unable to resolve module assets/images

Logs

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `assets/images` from `D:\App\src\pages\Splash\Splash.tsx`: Module `assets/images` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (D:\App\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:209:1301)
    at ResolutionRequest.resolveDependency (D:\App\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:83:16)
    at DependencyGraph.resolveDependency (D:\App\node_modules\metro\src\node-haste\DependencyGraph.js:238:485)
    at Object.resolve (D:\App\node_modules\metro\src\lib\transformHelpers.js:180:25)
    at dependencies.map.result (D:\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:311:29)
    at Array.map (<anonymous>)
    at resolveDependencies (D:\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:307:16)
    at D:\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:164:33
    at Generator.next (<anonymous>)
    at step (D:\App\node_modules\metro\src\DeltaBundler\traverseDependencies.js:266:307)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 34
Comments: 22 (2 by maintainers)

Most upvoted comments

I’ve tried other solutions in this thread, in addition to trying to work around the issue with “@babel/register”. It did not work.

What worked for me was to edit metro.config.js and use extraNodeModules.

Since I have this in tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "."

And I want to import from “[root]/src” as “src/…”, here’s my full metro.config.js configuration:

const path = require("path")

module.exports = {
  resolver: {
    extraNodeModules: {
      "src": path.resolve(__dirname, 'src'),
    }
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
}

If your module still isn’t being found, try tweaking sourceExts.

+34

resolritter on Jan 3, 2020

The solution to this is to add babel-plugin-module-resolve and then mimic the baseUrl/paths setup in your Babel config to transform your import paths like TypeScript would.

@nkovacic for your configuration, your .babelrc should similar to this:

{
    "presets": ["module:metro-react-native-babel-preset"],
    "plugins": [
        [
            "module-resolver",
            {
                "root": ["./src"],
                "alias": {
                    "@assets/*": "assets/*"
                }
            }
        ]
    ]
}

+10

solkaz on Oct 16, 2018

This solution did not work for me. As far as I can tell, the babel.config.js file is not even being read in my environment; I put some gibberish at the bottom of the file, and the application still built and loaded (minus the fact this error came up).

I am on React Native 0.59.5 - I am not sure if that could explain the difference in behavior.

dawsonc623 on Apr 29, 2019

same question and I used solution of @solkaz, little different.

.babelrc

    [
      "module-resolver",
      {
        "alias": {
          "@kit": "./src/kit"
        }
      }
    ]

tsconfig.json

    "baseUrl": ".",
    "paths": {
      "@kit/*": ["src/kit/*"]
    }

MR03web on Oct 17, 2018

For everyone for whom using babel-plugin-module-resolve didn’t work and is using Expo: Try running your project with expo start --clear to clear your Javascript transform cache, it worked for me.

apedroferreira on May 27, 2020

The babel-plugin-module-resolver documentation shows how to use regular expressions to address this. So after some experimenting, this is a running example:

tsconfig.json

"baseUrl": ".",
    "paths": {
      "xyz": ["src/components/xyz/index"],
      "xyz/*": ["src/components/xyz/*"],
      "components/*": ["src/components/*"],
    }

babel.config.js

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        alias: {
          "xyz": ["./src/components/xyz/"],
          "components/(.+)": "./src/components/\\1",
        }
      }
    ]
  ]
}

Adding a special path for index imports was the only way to make it work in my experience

Using it is straight forward:

import Something from 'xyz';
import { SomethingElse } from 'components/SomethingElse';

Took some trial and error but it’s working fine now.

afiouni on Apr 19, 2019

Probably this could help somebody. It helped me: https://www.reactnativeschool.com/how-to-setup-path-alias-in-a-react-native-typescript-app

Bi0max on Aug 25, 2022