A newly created Local Expo CLI project that I ran a prebuild on to generate the Android React native build hierarchy under the ./android subdir errors out during deployment on a cd ./android; npx react-native start --reset-cache command with the following error:

>  ERROR  Error: Unable to resolve module @/components/HapticTab from C:\Temp\Loca
> l_Expo_CLI_RN_Web_prebuild\app\(tabs)\_layout.tsx: @/components/HapticTab could
> not be found within the project or in these directories:
> node_modules
> 3 | import { Platform } from 'react-native';
> 4 |
> 5 | import { HapticTab } from '@/components/HapticTab';
>     |                            ^
> 6 | import { IconSymbol } from '@/components/ui/IconSymbol';
> 7 | import TabBarBackground from '@/components/ui/TabBarBackground';
> 8 | import { Colors } from '@/constants/Colors';

The newly created Expo project DID NOT have the appropriate config info for this Typescript "alias", which needs to have "path mapping" defined in tsconfig.json, which I added, like so:

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": [
        "components/*"
      ]
    }
  },

For good measure, I also added the alias mappings in metro.config.js like so:

const added_config = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'], // Set the root directory for aliases
        alias: {
            "@/components/*": ["components/*"], 
        },
      },
    ],
  ],
  };
  const config = getDefaultConfig(__dirname, added_config);

These paths are all ABSOLUTELY correct. And for further good measure added this appropriate flag to app.json:

    "experiments": {
      "tsConfigPaths": true,
      "typedRoutes": false
    }

The questions are: Why does a React native deploy error out while an Expo deploy works just fine, and how can the former runtime error get resolved?

Thanks in advance for your help.

A newly created Local Expo CLI project that I ran a prebuild on to generate the Android React native build hierarchy under the ./android subdir errors out during deployment on a cd ./android; npx react-native start --reset-cache command with the following error:

>  ERROR  Error: Unable to resolve module @/components/HapticTab from C:\Temp\Loca
> l_Expo_CLI_RN_Web_prebuild\app\(tabs)\_layout.tsx: @/components/HapticTab could
> not be found within the project or in these directories:
> node_modules
> 3 | import { Platform } from 'react-native';
> 4 |
> 5 | import { HapticTab } from '@/components/HapticTab';
>     |                            ^
> 6 | import { IconSymbol } from '@/components/ui/IconSymbol';
> 7 | import TabBarBackground from '@/components/ui/TabBarBackground';
> 8 | import { Colors } from '@/constants/Colors';

The newly created Expo project DID NOT have the appropriate config info for this Typescript "alias", which needs to have "path mapping" defined in tsconfig.json, which I added, like so:

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": [
        "components/*"
      ]
    }
  },

For good measure, I also added the alias mappings in metro.config.js like so:

const added_config = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'], // Set the root directory for aliases
        alias: {
            "@/components/*": ["components/*"], 
        },
      },
    ],
  ],
  };
  const config = getDefaultConfig(__dirname, added_config);

These paths are all ABSOLUTELY correct. And for further good measure added this appropriate flag to app.json:

    "experiments": {
      "tsConfigPaths": true,
      "typedRoutes": false
    }

The questions are: Why does a React native deploy error out while an Expo deploy works just fine, and how can the former runtime error get resolved?

Thanks in advance for your help.

• react-native
• expo

1 Answer 1

When defining aliases, you need to include the actual path. So instead of ["components/*"], it needs to be ["./path/to/components/*"]