Next.js SSR站点将Header改为CSR时出现TypeError运行时错误求助

问题背景 #

我用Next.js搭建了服务端渲染（SSR）的React站点，要给Header组件添加滚动显示/隐藏的事件监听，需要用到useState和useEffect钩子，所以得把Header改成客户端渲染（CSR）。但在Header的js文件顶部加上"use client"指令后，出现了如下错误：

未处理的运行时错误
TypeError: Cannot read properties of undefined (reading 'call')
调用栈：
options.factory
file:///C:/Users/TheUser/Desktop/website_project/.next/static/chunks/webpack.js (716:31)
webpack_require
file:///C:/Users/TheUser/Desktop/website_project/.next/static/chunks/webpack.js (37:33)
fn
file:///C:/Users/TheUser/Desktop/website_project/.next/static/chunks/webpack.js (371:21)
requireModule
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (156:22)
initializeModuleChunk
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1357:0)
readChunk
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1167:0)
mountLazyComponent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (16540:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (18260:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (26647:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25493:0)
workLoopConcurrent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25479:0)
renderRootConcurrent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (25435:0)
performConcurrentWorkOnRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24288:0)
workLoop
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (261:0)
flushWork
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (230:0)
MessagePort.performWorkUntilDeadline
node_modules\next\dist\compiled\scheduler\cjs\scheduler.development.js (534:0)

解决方法 #

1. 检查依赖版本匹配 #

这个错误大概率是Next.js和React、React DOM的版本不兼容导致的。打开项目根目录的package.json，确认react和react-dom的版本符合当前Next.js的要求（比如Next.js 13+需要React 18.2.0及以上）。如果版本不对，执行以下命令更新：

npm install react@latest react-dom@latest

2. 清理缓存并重启项目 #

Next.js的缓存可能导致模块加载异常，执行以下步骤重置项目：

• 删除.next文件夹和node_modules文件夹
• 重新安装依赖：npm install
• 重启开发服务器：npm run dev

Windows用户可以用命令：

rmdir /s .next
rmdir /s node_modules
npm install
npm run dev

3. 检查组件的导入导出方式 #

确保Header组件的导出和导入方式一致。比如组件是默认导出：

// Header.jsx
"use client";
export default function Header() { /* ... */ }

那么导入时要写成：

import Header from './Header';

不要混用命名导出（export const Header = () => {}）和默认导入，反之亦然。

4. 排除服务端专属模块的导入 #

客户端组件里不能导入只能在服务端运行的模块，比如fs、path，或者标记了"server-only"的模块。检查Header组件内的所有导入语句，把服务端相关的逻辑移到单独的服务端组件或者API路由中。

5. 确保"use client"的位置正确 #

"use client"必须是文件的第一行，前面不能有任何代码、注释或空行。正确的写法示例：

"use client";

import { useState, useEffect } from 'react';

export default function Header() {
  // 滚动监听逻辑示例
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    let lastScrollTop = 0;
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      setIsVisible(scrollTop <= lastScrollTop);
      lastScrollTop = scrollTop;
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <header style={{ display: isVisible ? 'block' : 'none' }}>
      {/* Header内容 */}
    </header>
  );
}

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