Next.js项目执行yarn build时@babel类型定义文件缺失错误求助

问题描述 #

我正在开发一个名为dapp-boilerplate的Next.js项目，项目的package.json配置如下：

{
  "name": "dapp-boilerplate",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "format": "prettier --write . --ignore-path .gitignore ./next-env.d.ts",
    "typechain": "typechain --target ethers-v5 --out-dir ./contracts/types './contracts/*.json'"
  },
  "dependencies": {
    "@types/": "metamask/providers",
    "@types/eslint": "^8.4.8",
    "next": "^12.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^13.0.0",
    "@typechain/ethers-v5": "^10.1.0",
    "@types/node": "^18.11.5",
    "@types/react": "^18.0.22",
    "@typescript-eslint/eslint-plugin": "^5.41.0",
    "@typescript-eslint/parser": "^5.41.0",
    "eslint": "^8.26.0",
    "eslint-config-next": "^13.0.0",
    "eslint-config-prettier": "^8.5.0",
    "ethers": "^5.0.31",
    "prettier": "2.7.1",
    "typechain": "^8.1.0",
    "typescript": "^4.1.3"
  }
}

执行yarn build命令时出现如下错误：

yarn run v1.22.19
$ next build
info  - Linting and checking validity of types .Failed to compile.

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

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

已排除eslint导致问题的可能，同时将项目部署到Netlify时也出现意外错误，寻求解决方案。

解决方案 #

1. 修复错误的依赖项 #

package.json的dependencies中存在格式错误的依赖项："@types/": "metamask/providers"，这是MetaMask Provider类型包的错误写法，正确包名应为@types/metamask__providers。将该行替换为：

"@types/metamask__providers": "^10.2.0"

这个错误会导致包管理器解析异常，进而触发类型查找混乱，是引发@babel类型错误的核心原因之一。

2. 统一Next.js相关依赖版本 #

当前项目使用的next版本为12.3.1，但devDependencies中的@next/eslint-plugin-next和eslint-config-next版本为13.0.0，跨大版本的依赖不兼容会导致构建时的类型检查异常。将这两个依赖降级到与next一致的版本：

"@next/eslint-plugin-next": "^12.3.1",
"eslint-config-next": "^12.3.1"

3. 升级TypeScript版本 #

Next.js 12.3.1要求TypeScript版本至少为4.6.4，当前使用的4.1.3版本过旧，存在大量类型兼容性问题。将typescript升级到兼容的稳定版本：

"typescript": "^4.9.5"

4. 清理依赖缓存并重新安装 #

执行以下命令清理缓存并重新安装依赖，确保所有包都正确解析：

rm -rf node_modules yarn.lock
yarn cache clean
yarn install

5. 检查TypeScript配置 #

打开tsconfig.json，确保：

• types数组中没有误添加@babel相关项，如果有则移除；
• typeRoots配置为默认值["./node_modules/@types"]，确保类型文件查找路径正确。

6. 修复Netlify部署问题 #

本地构建问题解决后，Netlify部署的意外错误通常会随之消失。可在项目根目录创建netlify.toml文件明确构建配置：

[build]
  command = "yarn build"
  publish = ".next"

[dev]
  command = "yarn dev"
  port = 3000

同时确保Netlify构建环境使用的Node.js版本与本地开发环境一致（可在Netlify控制台的构建设置中指定）。

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