React 18引入react-banner报错window is not defined及版本兼容问题

1. window is not defined 报错原因及修复 #

这个报错是因为你用的是Next.js这类服务端渲染（SSR）框架，服务端环境里没有浏览器的window对象，但react-banner在模块初始化阶段就直接访问了window，导致服务端编译时出错。

修复方法有两种：

• 动态导入组件（推荐）：用Next.js的动态导入，禁用服务端渲染：

  import dynamic from 'next/dynamic';
  
  const Banner = dynamic(() => import('react-banner'), { ssr: false });
  

  这样组件只会在客户端加载，不会触发服务端的window访问。
• 环境判断后再使用：如果要直接导入，需要确保只在客户端环境执行相关代码：

  let Banner;
  if (typeof window !== 'undefined') {
    Banner = require('react-banner').default;
  }
  
  // 渲染时判断组件是否存在
  function MyPage() {
    return (
      <div>
        {Banner && <Banner />}
      </div>
    );
  }
  

2. react-banner 版本与安装问题 #

react-banner最后一次更新是2019年，依赖React 16.x版本，没有后续新版本。你必须用--legacy-peer-deps或--force才能安装，是因为你的项目用了更高版本的React（比如18.x），peer依赖不兼容。

如果不想长期依赖这个停止维护的旧包，建议自己实现一个简单的Banner组件，或者选择维护更活跃的替代组件（比如功能类似的通知类组件）。

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