创建tsconfig.json后Next.js 13项目出现模块无法解析问题

问题根源是自动生成的tsconfig.json缺少路径别名解析配置。你之前的项目应该是通过jsconfig.json配置了@作为根路径别名，但当项目中存在tsconfig.json时，Next.js会优先使用TypeScript的配置文件，而自动生成的这个文件没同步路径规则，导致webpack和TS无法识别@/...格式的导入。

直接修改tsconfig.json即可解决：

• 在compilerOptions节点下添加baseUrl和paths配置，同时可以补充JS/JSX文件的包含规则，确保原有代码不受影响：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    // 新增路径别名配置
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    // 补充原有JS/JSX文件的包含规则
    "**/*.js",
    "**/*.jsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

修改完成后重启npm run dev服务，再执行npm run build就不会出现路径解析错误了。

内容的提问来源于stack exchange，提问作者hansaplast