React-Native with Expo: Shows "Cannot find module 'xyz' or its corresponding type declarations." when importing a custom constant view

Question

I created a React Native project with Expo.

I have the MainButton.tsx file inside /components folder like this:

import { View, Text } from "react-native";

const MainButton = () => {
  return (
    ...
  );
};

export default MainButton;

Now in the index.tsx file in the app folder I want to import this custom button like this:

import { MainButton } from "../components";

But it shows the error: Cannot find module '../components' or its corresponding type declarations. How do I fix this? Should I modify the tsconfig.json file?

Answer 1

The import should be updated to:

import MainButton from "../components/MainButton";

if you want to use directory imports like imports like import { MainButton } from "../components"; without specifying the filename, set up module aliases in the tsconfig.json file.

In your tsconfig.json, add or modify the compilerOptions section to include paths.

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

After adding module aliases, you can update the import to:

import MainButton from "@components/MainButton";

Restart the Expo server