Issue
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.
Solution
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/*"]
Answered By - henry groves
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.