NextJs项目构建报错：找不到theme类型定义文件求助

问题概述 #

构建Next.js项目时执行npm run build报错，已尝试以下操作但无效：

• 删除.next文件夹后重新编译
• 删除node_modules和package-lock.json后重新安装依赖并编译

构建终端错误日志 #

- Environments: .env.local

   Creating an optimized production build ...
 ⨯ Failed to find font override values for font `Protest Guerrilla`
 ⨯ Failed to find font override values for font `Protest Guerrilla`
 ✓ Compiled successfully
   Linting and checking validity of types  ..Failed to compile.

Type error: Cannot find type definition file for 'theme'.
  The file is in the program because:
    Entry point for implicit type library 'theme'

项目配置文件 #

package.json #

{
  "name": "app_name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/cache": "^11.13.1",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@flaticon/flaticon-uicons": "^3.3.1",
    "@mui/icons-material": "^6.1.2",
    "@mui/material": "^6.1.2",
    "@mui/material-nextjs": "^6.1.2",
    "@tanstack/react-query": "^5.59.9",
    "axios": "^1.7.7",
    "next": "14.2.14",
    "next-auth": "^4.24.8",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.53.0"
  },
  "devDependencies": {
    "@tanstack/eslint-plugin-query": "^5.59.7",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^7.18.0",
    "@typescript-eslint/parser": "^7.18.0",
    "eslint": "^8",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^18.0.0",
    "eslint-config-next": "14.2.14",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "prettier": "^3.3.3",
    "typescript": "^5"
  }
}

tsconfig.json #

{
  "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": {
      "@/*": ["./src/*", "./src/theme/*"]
    },
    "typeRoots": ["./node_modules/@types", "./src/app/types"],
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/types/theme/theme.d.ts", "src/app/types/**/*.ts"],
  "exclude": ["node_modules"]
}

解决方案 #

1. 搞定字体Protest Guerrilla的报错 #

这个错是Next.js找不到该字体的配置，得检查这几点：

• 有没有用next/font正确加载这个字体？或者在MUI主题里有没有配好字体来源？
• 如果是用MUI主题，看看主题配置里是不是正确引入了字体，比如这么写：

  import { Protest_Guerrilla } from 'next/font/google';
  const protestGuerrilla = Protest_Guerrilla({ subsets: ['latin'] });
  
  const theme = createTheme({
    typography: {
      fontFamily: protestGuerrilla.style.fontFamily,
    },
  });
  

• 别光在主题里声明了这个字体，实际却没引入或者加载它

2. 解决theme类型定义找不到的问题 #

从你的tsconfig来看，已经把src/app/types加到typeRoots里了，但TypeScript还是找不到，试试这几个办法：

• 打开src/app/types/theme/theme.d.ts，看看内容是不是有效的类型定义，比如得是类似这样的：

  import type { Theme as MuiTheme } from '@mui/material/styles';
  
  declare module '@mui/material/styles' {
    interface Theme extends MuiTheme {
      // 这里写你的自定义类型
    }
  }
  

• 修改tsconfig.json的compilerOptions，加个types字段指定要包含的类型：

  "compilerOptions": {
    // ...其他配置不动
    "types": ["theme"]
  }
  

• 看看include数组，你现在已经包含了src/app/types/theme/theme.d.ts，可以把重复的路径删掉，保持干净：

  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/types/**/*.ts"],
  

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