使用Next.js 12.0.8时无法解析next/web-vitals的问题求助

问题核心在于你使用的Next.js版本不支持从next/web-vitals导入模块：

• Next.js 12.2.0及以上版本才将web-vitals集成到核心包中，支持从next/web-vitals导入useReportWebVitals
• 你当前使用的12.0.8版本没有内置该模块，因此会出现找不到模块的错误

两种可行解决办法： #

方法1：升级Next.js到兼容版本 #

执行以下命令，将Next.js升级到12.2.0及以上（同时保持React版本适配）：

npm install next@^12.2.0 react@^17.0.2 react-dom@^17.0.2

升级完成后，即可继续使用import { useReportWebVitals } from 'next/web-vitals'的导入方式。

方法2：单独安装web-vitals包（不升级Next.js） #

1. 安装依赖包：

npm install web-vitals

2. 修改导入语句，直接从web-vitals包中导入：

import { useReportWebVitals } from 'web-vitals'

你之前清理缓存、重装依赖的操作本身没问题，但没触及版本不兼容的核心问题，按上述任一方法调整后即可解决报错。

内容的提问来源于stack exchange，提问作者Shivakant Upendra Shukla