Next.js页面刷新/API请求失败时出现@hookform/resolvers模块缺失错误

问题现象 #

开发Next.js项目时遇到以下异常：

• 页面刷新时触发Cannot find module '@hookform/resolvers/yup/dist/yup'错误
• 从登录流程正常访问各页面时无此错误，仅在API数据请求失败时才会出现

完整错误日志 #

Uncaught Error: Cannot find module 'C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\@hookform\resolvers\yup\dist\yup'
at createEsmNotFoundErr (node:internal/modules/cjs/loader:960:15)
at finalizeEsmResolution (node:internal/modules/cjs/loader:953:15)
at resolveExports (node:internal/modules/cjs/loader:483:14)
at Module._findPath (node:internal/modules/cjs/loader:523:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:925:27)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at Module._load (node:internal/modules/cjs/loader:780:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
getServerError @ client.js?4d30:7
eval @ index.js?46cb:709
setTimeout (async)

package.json配置 #

{ 
  "name": "apsit-community", 
  "author": "apsit", 
  "version": "1.0.0", 
  "description": "Platform build by students for the students.", 
  "private": true, 
  "scripts": { 
    "lint": "next lint", 
    "lint:es": "eslint --ext .js,.jsx .", 
    "lint:fix": "eslint --fix --ext .js,.jsx .", 
    "dev": "next dev -p 3031", 
    "build": "next build", 
    "start": "next start" 
  }, 
  "dependencies": { 
    "@auth0/auth0-spa-js": "^1.19.3", 
    "@emotion/cache": "^11.7.1", 
    "@emotion/react": "^11.7.1", 
    "@emotion/server": "^11.4.0", 
    "@emotion/styled": "^11.6.0", 
    "@fullcalendar/common": "^5.10.1", 
    "@fullcalendar/daygrid": "^5.10.1", 
    "@fullcalendar/interaction": "^5.10.1", 
    "@fullcalendar/list": "^5.10.1", 
    "@fullcalendar/react": "^5.10.1", 
    "@fullcalendar/timegrid": "^5.10.1", 
    "@fullcalendar/timeline": "^5.10.1", 
    "@hookform/resolvers": "^2.9.7", 
    "@iconify/react": "^3.1.0", 
    "@mui/lab": "^5.0.0-alpha.60", 
    "@mui/material": "^5.2.4", 
    "@mui/x-data-grid": "^5.2.1", 
    "@react-pdf/renderer": "^2.0.21", 
    "@reduxjs/toolkit": "^1.7.1", 
    "@turf/bbox": "^6.5.0", 
    "amazon-cognito-identity-js": "^5.2.3", 
    "apexcharts": "^3.32.0", 
    "autosuggest-highlight": "^3.2.0", 
    "axios": "^0.24.0", 
    "change-case": "^4.1.2", 
    "cookie": "^0.4.1", 
    "d3-array": "^3.1.1", 
    "d3-scale": "^4.0.2", 
    "date-fns": "^2.27.0", 
    "deck.gl": "^8.6.5", 
    "emoji-mart": "^3.0.0", 
    "firebase": "^9.6.1", 
    "framer-motion": "^5.5.5", 
    "geojson": "^0.5.0", 
    "highlight.js": "^11.3.1", 
    "i18next": "^21.6.3", 
    "i18next-browser-languagedetector": "^6.1.2", 
    "immutable": "^4.0.0", 
    "js-cookie": "^3.0.1", 
    "jsonwebtoken": "^8.5.1", 
    "jwt-decode": "^3.1.2", 
    "lodash": "^4.17.19", 
    "mapbox-gl": "^2.6.1", 
    "next": "^12.0.7", 
    "next-transpile-modules": "^9.0.0", 
    "notistack": "^2.0.3", 
    "nprogress": "^0.2.0", 
    "numeral": "^2.0.6", 
    "prop-types": "^15.8.1", 
    "react": "^17.0.1", 
    "react-apexcharts": "^1.3.9", 
    "react-beautiful-dnd": "^13.1.0", 
    "react-copy-to-clipboard": "^5.0.4", 
    "react-dom": "^17.0.2", 
    "react-dropzone": "^11.4.2", 
    "react-hook-form": "^7.22.2", 
    "react-i18next": "^11.15.1", 
    "react-image-lightbox": "^5.1.4", 
    "react-lazy-load-image-component": "^1.5.1", 
    "react-map-gl": "^6.1.18", 
    "react-markdown": "^7.1.1", 
    "react-quill": "^2.0.0", 
    "react-redux": "^7.2.6", 
    "react-slick": "^0.28.0", 
    "redux": "^4.1.2", 
    "redux-persist": "^6.0.0", 
    "rehype-raw": "^6.1.0", 
    "simplebar": "^5.3.6", 
    "simplebar-react": "^2.3.6", 
    "slick-carousel": "^1.8.1", 
    "stylis": "^4.0.13", 
    "stylis-plugin-rtl": "^2.1.1", 
    "worker-loader": "^3.0.8", 
    "yup": "^0.32.11" 
  }, 
  "devDependencies": { 
    "@next/eslint-plugin-next": "^12.0.7", 
    "eslint": "^7.32.0", 
    "eslint-config-next": "^12.0.7", 
    "eslint-config-prettier": "^8.3.0", 
    "prettier": "2.5.1", 
    "typescript": "^4.4.4" 
  } 
}

解决方案 #

1. 修正模块导入路径 #

@hookform/resolvers v2.x版本的官方正确导入方式为：

import { yupResolver } from '@hookform/resolvers/yup';

检查项目中是否存在直接引用@hookform/resolvers/yup/dist/yup的代码，全部替换为上述标准写法。

2. 清理依赖并重新安装 #

• 删除依赖目录和锁文件：

  # Windows系统
  rd /s /q node_modules && del package-lock.json yarn.lock
  # macOS/Linux系统
  rm -rf node_modules package-lock.json yarn.lock
  

• 重新安装依赖：

  npm install
  

• 清理Next.js缓存：

  npm run build
  # 开发环境可执行
  next dev --clean
  

3. 配置Next.js转译模块 #

在next.config.js中添加配置，强制转译@hookform/resolvers模块：

const withTM = require('next-transpile-modules')(['@hookform/resolvers']);

module.exports = withTM({
  // 你的其他Next.js配置项
});

4. 排查API错误后的渲染逻辑 #

错误仅在API请求失败时触发，需检查：

• API请求失败后渲染的组件中，是否有表单组件的resolver导入异常
• 确保所有使用yupResolver的组件在服务端和客户端都能正常加载，避免动态导入时的路径错误

5. 升级相关依赖 #

尝试升级依赖到兼容版本，修复可能存在的模块路径问题：

npm update @hookform/resolvers react-hook-form yup

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