Next.js中使用react-flip-page库出现window未定义错误求助

错误原因 #

Next.js默认采用服务端渲染（SSR），服务器环境中不存在浏览器专属的window对象。而react-flip-page库在模块加载阶段就直接访问了window，导致SSR执行时抛出错误。

解决办法 #

1. 用Next.js动态导入禁用SSR #

通过next/dynamic导入组件并关闭SSR，让react-flip-page仅在客户端加载：

import dynamic from 'next/dynamic';

const FlipPage = dynamic(() => import('react-flip-page'), {
  ssr: false,
  loading: () => <div>加载中...</div> // 可选：添加加载占位
});

export default function MyPage() {
  return (
    <FlipPage>
      <div>页面1</div>
      <div>页面2</div>
    </FlipPage>
  );
}

2. 延迟组件渲染到客户端 #

如果需要保留页面其他部分的SSR，可在组件挂载后再渲染react-flip-page：

import FlipPage from 'react-flip-page';
import { useEffect, useState } from 'react';

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

  useEffect(() => {
    setIsClient(true); // 组件挂载后确认处于客户端环境
  }, []);

  if (!isClient) {
    return <div>加载中...</div>; // SSR阶段显示占位内容
  }

  return (
    <FlipPage>
      <div>页面1</div>
      <div>页面2</div>
    </FlipPage>
  );
}

3. Webpack配置兜底（不推荐） #

如果前两种方法无效，可尝试修改next.config.js让Webpack模拟window存在：

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

module.exports = nextConfig;

注意事项 #

• 禁用SSR的组件无法被服务端渲染，会影响该部分内容的SEO，需根据页面需求选择方案。
• 确保你的Next.js版本在9.3及以上，支持next/dynamic特性。

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