Cannot find module '@components/...' or its corresponding type declarations.ts(2307) in React Native

Question

Previously have used TypeScript with React several times without any issues. Moving over to React Native and recieved this error for both imports for my custom "RoundedButton" and "Card" components:

Cannot find module '@components/Buttons/RoundedButton' or its corresponding type declarations.ts(2307)
Cannot find module '@components/Card' or its corresponding type declarations.ts(2307)

Here is the ./app/index.tsx...

import React from 'react';
import { View, Text } from 'react-native';
import Card from '@components/Card';
import RoundedButton from '@components/Buttons/RoundedButton';

export default function Home() {
  return (
    // Create a view the same size as the screen and center the content with a background color
    <View className="justify-center h-full">
      <Card>
        <Text className="text-2xl font-bold text-center mb-3">
          lorem ipsum
        </Text>
        <RoundedButton text="Sign Up" color="primary" onPress={() => {}} />
        <RoundedButton text="Sign In" color="secondary" onPress={() => {}} />
      </Card>
    </View>
  );
}

...the ./components/Card.tsx...

import React from 'react';
import { View } from 'react-native';
import styles from '@styles/components/Card.scss';

// Add type definitions for the props
type CardProps = {
  children: React.ReactNode;
};

function Card(props: CardProps) {
  const { children } = props;
  // Return the card with the appropriate styles
  return <View className={`${styles.card}`}>{children}</View>;
}

export default Card;

...and the ./components/Buttons/RoundedButton.tsx

import React from 'react';
import { Pressable, Text } from 'react-native';
import styles from '@styles/components/Buttons/RoundedButton.scss';

// Add type definitions for the props
type RoundedButtonProps = {
  text: string;
  color: 'primary' | 'secondary' | 'tertiary';
  onPress: () => void;
};

function RoundedButton(props: RoundedButtonProps) {
  // Destructure the props
  const { text, color, onPress } = props;
  const buttonColor = `button-${color}`;
  const textColor = `text-${color}`;
  // Return the button with the appropriate styles
  return (
    <Pressable
      onPress={onPress}
      className={`${styles.button} ${styles[buttonColor]}`}
    >
      <Text className={`${styles.text} ${styles[textColor]}`}>{text}</Text>
    </Pressable>
  );
}

export default RoundedButton;

Also my ./tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "allowJs": true,
    "esModuleInterop": true,
    "jsx": "react-native",
    "lib": ["esnext", "dom"],
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "target": "ESNext",
    "types": ["react-native"],
    "baseUrl": "./",
    "paths": {
      "@app": ["./app/*"],
      "@assets": ["./assets/*"],
      "@components": ["./components/*"],
      "@styles": ["./styles/*"],
      "@utils": ["./utils/*"]
    }
  }
}

I've tried looking into the issue several times and can't find a clear answer for the problem. Besides the red squiggles below there '@components/Card' and '@components/Buttons/RoundedButton' in index.tsx I have no other ESLint, TypeScript or build errors across the whole project.

I am not sure if I need a types.ts for each one, but I never had to do that when I worked on two other React TypeScript projects in the past.

Answer 1

When defining your custom imports in tsconfig.json, you must match all paths after @components, using /*, otherwise the resolver will not expect any further paths.

Therefore, change your paths to:

"paths": {
  "@app/*": ["./app/*"],
  "@assets/*": ["./assets/*"],
  "@components/*": ["./components/*"],
  "@styles/*": ["./styles/*"],
  "@utils/*": ["./utils/*"]
}

NB: The path linked to each @import should be the path of that directory; For example, if your @components are in the ./src/components directory, then change the path linked to @components to ["./src/components/*"]