Module not found: Can't resolve Next.js - TypeScript

Question

I receive the image´s error but I don´t understand why do I get it. Also attached the directory in the second image.

import Link from 'next/link';
import { useState } from 'react';
import { ProductModel } from '../models/product';
import { CardProduct } from '../components/CardProduct';

const List = () => {

  let list: ProductModel[] = [  //ProductModel[] esto significa que va a ser un array de ProductModel
    {
      id: 1,
      name: "shoes",
      price: 9999,
    },
  ];

  const [products, setProducts] = useState<ProductModel[]>(list);

  return (
    <div>
      Soy la página de Productos
      {products.map((element, index) => {
        return <CardProduct product={element}/>;
      })}
      <br/>
      <Link href="/">
        <a>Ir a la home</a>
      </Link>
    </div>
  );
}

export default List;

Answer 1

I was stuck in a similar issue after removing a loading.tsx file on Next.js 13 with App router. The solution was to remove the .next/ directory, which will be automatically rebuild on npm run dev.

Answer 2

You need to create an empty tsconfig.json file in your project's root folder and then run npm as you would normally (for instance, npm run dev). NextJs will then populate the file with default ts config values. See here:

https://nextjs.org/docs/basic-features/typescript