I have a project of next.js 14 and typescript v5 installed.
I noticed that ts compiler is not showing errors for types and generally is not working as expected.
Here is an example code component, ideally i have to make an interface or a type for the two props (country and area) in the other hand is not complaining at all.
const PropertyInformation = ({country, area}) => {
return (
<Flex justify={"unset"} direction={"row"} columnGap={48} p={16}>
<Flex align={"center"} direction={"row"} columnGap={16}>
<Image src={building} alt="Logo" width={48} height={48} />{" "}
<Text size={"xl"}>a Flat</Text>
</Flex>
<Flex align={"center"} direction={"row"} columnGap={16}>
<Image src={dimensions} alt="Logo" width={48} height={48} />{" "}
<Text size={"xl"}>{area} m2</Text>
</Flex>
<Flex align={"center"} direction={"row"} columnGap={16}>
<Image src={location} alt="Logo" width={48} height={48} />{" "}
<Text size={"xl"}>{country}</Text>{" "}
</Flex>
</Flex>
);
};
export default PropertyInformation;
Also i post the tsconfig file
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["app/", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "./theme/declarations.d.ts"],
"exclude": ["node_modules"]
}
Finally two images from my root directory and Configure Typescript (from webstorm)
The issue has been solved. I had an old version of webstrom IDE and with the newer version of typescript and next.js 14 is not working as expected.