javascript - React-Native with Expo: Shows "Cannot find module 'xyz' or its corresponding type declarat

admin管理员组

文章数量:1341462

I created a React Native project with Expo.

I have the MainButton.tsx file inside /ponents 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 "../ponents";

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

I created a React Native project with Expo.

I have the MainButton.tsx file inside /ponents 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 "../ponents";

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

• javascript
• typescript
• react-native
• expo

Share Follow edited Aug 9, 2024 at 23:38 Hans Passant 943k150150 gold badges1.8k1.8k silver badges2.6k2.6k bronze badges asked Aug 6, 2024 at 22:03 HelloVictor2000HelloVictor2000 7911 gold badge22 silver badges66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The import should be updated to:

import MainButton from "../ponents/MainButton";

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

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

{
  "pilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@ponents/*": ["ponents/*"]
    }
  }
}

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

import MainButton from "@ponents/MainButton";

Restart the Expo server

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 "../ponents/MainButton.tsx";

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

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

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

本文标签：