模块未找到：无法解析 Next.js - TypeScript。

Question

我收到了图片的错误提示，但我不明白为什么会出现这个错误。第二张图片中附有目录。

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;

- GCB

---

往往情况下，重新启动开发服务器可以解决这个问题。你可以试试吗？ - PsyGik

我尝试了，但是没有起作用。 - GCB

除了重启开发服务器之外，还可以尝试从项目根目录中删除.next文件夹。 - juliomalves

@GCB 有关于您如何解决这个问题的进一步更新吗？ - klevisx

@PsyGik你在这里会尝试什么其他的方法？这种情况发生在我将组件从js更改为tsx后。 - klevisx

Answer 1

您需要在项目的根文件夹中创建一个空的 `tsconfig.json` 文件，然后像通常一样运行 npm（例如，`npm run dev`）。然后 Next.js 将使用默认的 ts 配置值填充该文件。请查看这里：

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

- Nando Machado

Answer 2

我在删除Next.js 13中的一个loading.tsx文件后遇到了类似的问题，使用App路由器。解决方案是删除.next/目录，该目录将在npm run dev时自动重建。

- pa4080

---

这是对我有效的修复方法。谢谢！我一直在为运行nx reset或手动清除./node_modules/.cache/nx缓存而苦恼，但都没有起作用。 - Terry

Answer 3

这通常是由于tsconfig.json中缺少属性导致的。尝试创建一个新的tsconfig.json文件，让nextjs为您生成所需的配置。

touch tsconfig.json

参考链接：https://nextjs.org/learn/excel/typescript/create-tsconfig

- Akarsh Srivastava