skip to Main Content

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?

2

Answers


  1. Chosen as BEST ANSWER

    I found that changing the import to: import MainButton from "../components/MainButton"; works for me, and I don't need to modify the tsconfig.json file.


  2. The module is not being found because it is being exported out of the file it is within not the folder itself. You can fix this by changing the import to

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

    This could also be fixed within your typescript config if wanted by adding the following to your config.

    "paths": {
      "components/*": ["components/*"]
    }
    

    This should look for it within all files under the component directory. I would say I typically see the first option used by most people 🙂 Let me know if you need any further clarification!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search