在Next.js应用中使用emoji-mart时出现ReferenceError: window未定义错误

问题原因 #

Next.js默认采用服务端渲染（SSR），服务端执行代码时不存在浏览器环境的window对象，但emoji-mart包的初始化逻辑直接依赖window，因此触发该错误。

解决方案 #

方法1：使用Next.js动态导入（推荐） #

通过next/dynamic动态导入emoji-mart组件，并禁用服务端渲染，确保组件仅在客户端加载：

import dynamic from 'next/dynamic';

// 动态导入Picker组件，关闭SSR
const Picker = dynamic(() => import('emoji-mart').then(mod => mod.Picker), {
  ssr: false,
});

export default function EmojiPicker() {
  return <Picker />;
}

方法2：组件内判断客户端环境 #

直接导入组件后，通过useEffect确认处于客户端环境再渲染：

import { useState, useEffect } from 'react';
import { Picker } from 'emoji-mart';

export default function EmojiPicker() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    // 组件挂载后标记为客户端环境
    setIsClient(true);
  }, []);

  // 仅在客户端渲染Picker
  return isClient ? <Picker /> : null;
}

方法3：修改webpack配置（不推荐） #

若上述方法不适用，可在next.config.js中配置fallback，但可能影响整体性能：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: config => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      window: false,
    };
    return config;
  },
};

module.exports = nextConfig;

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