Next.js 14中'use client'组件仍报window未定义的问题求助

原因分析 #

1. 'use client'的执行逻辑：标记为'use client'的组件并非完全脱离服务器端处理——Next.js在SSR阶段仍会编译这些组件的顶层代码（包括模块导入语句）。如果第三方库在模块顶层直接访问window对象（比如初始化时就执行window.someApi），服务器端执行这段代码时就会报错，因为Node.js环境没有window。
2. 旧动态加载方案的问题：你参考的方案未适配Next.js 14的App Router，也没有明确禁用SSR（ssr: false），同时缺失TypeScript类型处理，导致导入逻辑仍在服务器端执行。

修复方案 #

方案1：Next.js官方动态导入（兼容TypeScript） #

使用next/dynamic并明确设置ssr: false，确保库只在客户端加载：

'use client';
import dynamic from 'next/dynamic';

// 动态导入依赖window的库，禁用SSR
const HtmlToDraftjs = dynamic(
  () => import('html-to-draftjs').then((mod) => mod.default),
  { 
    ssr: false, 
    loading: () => <div>加载中...</div> // 可选：加载状态占位
  }
);

export default function MessageComposer() {
  // 仅在客户端渲染时使用HtmlToDraftjs
  const convertHtml = (html: string) => {
    return HtmlToDraftjs(html);
  };

  return <div>{/* 组件内容 */}</div>;
}

方案2：客户端生命周期钩子中导入 #

在useEffect（仅客户端执行）中异步导入库，彻底避免服务器端执行：

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

// 定义库的类型
type HtmlToDraftjsFn = typeof import('html-to-draftjs').default;

export default function MessageComposer() {
  const [htmlConverter, setHtmlConverter] = useState<HtmlToDraftjsFn | null>(null);

  useEffect(() => {
    // 仅在客户端异步加载库
    import('html-to-draftjs').then((mod) => {
      setHtmlConverter(mod.default);
    });
  }, []);

  // 未加载完成时显示占位
  if (!htmlConverter) {
    return <div>加载中...</div>;
  }

  // 使用库
  const draftContent = htmlConverter('<p>测试内容</p>');

  return <div>{/* 渲染内容 */}</div>;
}

方案3：Webpack全局变量模拟（兜底方案） #

如果前两种方案无效，可通过Next.js的Webpack配置模拟window存在，但注意可能引发其他兼容性问题：

// next.config.js
const webpack = require('webpack');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.plugins.push(
      new webpack.DefinePlugin({
        'typeof window': JSON.stringify('object'),
      })
    );
    return config;
  },
};

module.exports = nextConfig;

报错日志参考 #

./src/components/Chat/MyChat.tsx
./src/components/Chat/index.tsx
./src/components/layouts/Navigation.tsx
./src/app/page.tsx
 ⨯ node_modules/html-to-draftjs/dist/html-to-draftjs.js (1:333) @ eval
 ⨯ ReferenceError: window is not defined
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/MessageComposer/index.tsx:10:73)
    at (ssr)/./src/components/Chat/MessageComposer/index.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:1303:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/Chat/MessageInput.tsx:13:103)
    at (ssr)/./src/components/Chat/Chat/MessageInput.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:841:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/Chat/Chat.tsx:9:105)
    at (ssr)/./src/components/Chat/Chat/Chat.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:720:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/Chat/ChatPanel.tsx:12:97)
    at (ssr)/./src/components/Chat/Chat/ChatPanel.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:764:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/ChatView.tsx:14:102)
    at (ssr)/./src/components/Chat/ChatView.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:1094:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/MyChat.tsx:9:96)
    at (ssr)/./src/components/Chat/MyChat.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:1149:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/Chat/index.tsx:9:100)
    at (ssr)/./src/components/Chat/index.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:1347:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/layouts/Navigation.tsx:13:87)
    at (ssr)/./src/components/layouts/Navigation.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:3668:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/page.tsx:10:91)
    at (ssr)/./src/app/page.tsx (/Users/whicheveruser/company/client-project/.next/server/app/page.js:500:1)
    at __webpack_require__ (/Users/whicheveruser/company/client-project/.next/server/webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)
**null**

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