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.