Next.js中'use client'与useState引发__webpack_require__.n错误的解决求助

针对你在React/Next.js项目中添加'use client'指令和useState后出现的TypeError: __webpack_require__.n is not a function错误，以下是几个实用的排查和解决步骤：

1. 升级Next.js到稳定版本 #

App Router的'use client'指令在Next.js 13.4及以后的版本中才完全稳定，旧版本可能存在兼容性问题。执行以下命令升级：

npm install next@latest

2. 清理项目缓存与重建 #

webpack缓存或依赖残留可能引发这类错误，按顺序执行以下操作：

# 删除缓存文件夹和依赖
rm -rf .next node_modules
# 重新安装依赖
npm install
# 重新构建项目
npm run build
# 启动开发服务器
npm run dev

如果问题依旧，可尝试清除npm全局缓存：

npm cache clean --force

3. 检查文件扩展名与导入路径 #

• 确保React组件文件使用.jsx或.tsx扩展名，Next.js在App Router模式下对文件类型有严格区分，避免用.js编写React组件。
• 验证页面组件中导入NavBar的路径是否正确，比如是否存在拼写错误或相对路径错误。

4. 同步React与React DOM版本 #

React和React DOM版本与Next.js不匹配也可能导致webpack编译异常，执行以下命令更新到最新兼容版本：

npm install react@latest react-dom@latest

5. 排查第三方依赖冲突 #

暂时移除react-icons依赖，简化组件代码测试：

'use client';
import { useState } from 'react';

export function NavBar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <nav className="navbar flex flex-row justify-between">
      <button
        type="button"
        className="text-lg font-medium text-center p-6 hover:yellow-hover"
        onClick={() => setMobileMenuOpen(true)}
      >
        菜单
      </button>
      <a href="#" className="text-lg font-bold text-center p-6 hover:yellow-hover">〔 sTGS 〕</a>
    </nav>
  );
}

如果简化后错误消失，说明是react-icons版本与当前Next.js不兼容，执行以下命令更新：

npm install react-icons@latest

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