Turbopack Monorepo中next/font/google报错,添加@next/font仍无效求助
Turborepo中Next.js 13.0.4的
next/font导入错误:原因与修复方案 问题原因
- 早期Next.js版本的Monorepo解析bug:Next.js 13.0.4属于13.x早期版本,在Turborepo这类Monorepo场景下,内置
next/font模块的路径解析存在bug,导致系统错误提示需导入@next/font而非内置的next/font。 - 依赖版本不匹配:手动安装
@next/font后,若该包版本与项目使用的Next.js 13.0.4不一致,会引发模块冲突,无法正常加载字体功能。 - Turborepo依赖干扰:Turborepo的依赖提升机制可能让web工作区加载了全局的
next包而非自身工作区的版本,导致内置字体模块无法被正确识别。
修复方案
方案1:修复依赖配置与导入(适配13.0.4版本)
- 移除web工作区
package.json中手动添加的@next/font依赖(Next.js 13.0.4中next/font是内置模块,无需单独安装)。 - 保持
_app.tsx中的官方导入写法不变:import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) - 清理并重新安装依赖:
- 删除项目根目录和web工作区的
node_modules文件夹。 - 在根目录执行
pnpm install(或对应包管理器的安装命令,如npm install/yarn install)。 - 重启
turbo dev开发服务器。
- 删除项目根目录和web工作区的
方案2:禁用特定依赖的提升
在项目根目录的turbo.json中添加配置,禁止next和@next/*包的依赖提升,确保web工作区使用自身的Next.js版本:
{ "packageManager": "pnpm@7.15.0", // 根据你的包管理器调整 "pipeline": { // 保留原有pipeline配置 }, "npmClientArgs": ["--no-hoist=next", "--no-hoist=@next/*"] }
执行依赖重装后重启开发服务器即可。
方案3:升级Next.js版本(推荐长期解决)
13.0.x早期版本存在较多Monorepo相关问题,升级到13.1及以上版本可彻底解决这类路径解析bug:
- 同步更新根目录和web工作区
package.json中的Next.js版本为^13.1.0或更高稳定版。 - 执行根目录的依赖安装命令,确保所有工作区依赖版本一致。
- 重启开发服务器后,使用官方默认的
next/font/google导入写法即可正常运行。
内容的提问来源于stack exchange,提问作者Rusty
相关产品推荐
相关产品推荐

