baseUrl in tsconfig is not supported

[nkovacic]

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)

[emin93]

Hi @nkovacic,

Thank you for creating an extended issue.

Sadly the .tsconfig can only be used for type checking and not for transpilation. That's because since React Native 0.57, TypeScript has been added as a preset for Babel 7 (https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/) and the TypeScript compiler is not being used anymore.

I have not yet found a solution for that issue and open for contributions.

[nkovacic]

Is there any other way to atleast set a base path, so that absolute paths can be used?
Because relative path imports like these are really a pain to mantain...
import { currentStepSelector } from '../../../../../modules/auth/reducer';

[emin93]

I never used absolute paths but I quickly checked and there seems to be a way: https://medium.com/@davidjwoody/how-to-use-absolute-paths-in-react-native-6b06ae3f65d1

[solkaz]

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/*"
                }
            }
        ]
    ]
}

[MR03web]

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

.babelrc

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

tsconfig.json

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

[nkovacic]

@solkaz tried your solution and there seems to be a collision between ./src folder and some react-native internals. Probably should work in other JavaScript projects.

[solkaz]

@nkovacic what errors were you getting?

[larryranches]

Also having this issue with setting baseUrl in the tsconfig. Any valid workarounds or solutions on this?

[nkovacic]

Even when changing the src main folder to app, paths still do not work. Can anyone share a complete example?

[afiouni]

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.

[dawsonc623]

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.

[guatedude2]

I'm seeing the same issue

[mrruby]

Adding babel-plugin-module-resolve and updating babel.config.js with tsconfig.js works fine in my 0.60.5 app

[radko93]

I don't think this is related to this template if you would like to have this feature consider submitting a PR.

[resolritter]

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.

[juanlet]

Neat solution @resolritter . That worked for me. Thanks!

[apedroferreira]

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.

[kelvinndmo]

Saved my life @apedroferreira

[revgum]

👍 to @apedroferreira

[Bi0max]

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

[DarkHaker03]

Thank u @resolritter , your solution really helped me )

[gabriel-hahn]

Thanks @apedroferreira! It worked for me with the module-resolver solution and resetting the cache too, but for React Native CLI: npm start -- --reset-cache