Option to resolve path alias?

[frozencap]

Error: Unable to resolve module @/auth/my.device.slice from

@ path alias is defined in tsconfig.json

  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["src/*"]
    }

[frankcalise]

Also running into this

[percy507]

Same problem

[IjzerenHein]

Could you provide a reproducible example?

[frankcalise]

@IjzerenHein you can just ignite a new app, we have it running TS paths by default:

npx ignite-cli@latest new pizza-visualizer --packager=bun --yes
cd pizza-visualizer
npx react-native-bundle-visualizer`

This will be an Expo Go application and you'll receive an error like the following:

Error: Unable to resolve module app/screens from /Users/fcalise/code/pizza-visualizer/app/navigators/AppNavigator.tsx: app/screens could not be found within the project or in these directories:
  node_modules
  15 | import React from "react"
  16 | import { useColorScheme } from "react-native"
> 17 | import * as Screens from "app/screens"
     |                           ^
  18 | import Config from "../config"
  19 | import { useStores } from "../models"
  20 | import { DemoNavigator, DemoTabParamList } from "./DemoNavigator"
    at ModuleResolver.resolveDependency (/Users/fcalise/code/pizza-visualizer/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:139:15)

If you want the native directories available, tack on --workflow=prebuild to the command above.

[gabimoncha]

In order to make it work for path alias, you need to add the alias also inside babel module-resolver plugin. This is my config using expo and typescript

babel.config.js

module.exports = function (api) {
  api.cache(true);
  const plugins = [
    'expo-router/babel',
    [
      'module-resolver',
      {
        alias: {
          '~': '.',
        },
      },
    ],
  ];

  plugins.push('react-native-reanimated/plugin');

  return {
    presets: ['babel-preset-expo'],
    plugins,
  };
};

tsconfig.json

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