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)

[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.

[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.