Next.js生产环境CodeMirror状态变更/重渲染时样式失效求助

针对你在Next.js项目中使用^4.20.2版本react-codemirror，部署Vercel后组件重渲染或状态变更时样式失效的问题，可尝试以下解决方案：

• 标记组件为客户端组件
  Next.js App Router默认启用服务端渲染(SSR)，而react-codemirror依赖浏览器DOM环境，SSR过程中可能无法正确注入样式。在Editor组件顶部添加'use client'指令，强制组件仅在客户端渲染：

  'use client';
  import { useState, useMemo } from 'react';
  import CodeMirror from '@uiw/react-codemirror';
  import { javascript } from '@codemirror/lang-javascript';
  import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night";
  import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
  
  export default function Editor({ setLoader, activeCode, setActiveCode }) {
      const [code, setCode] = useState("");
      // 后续代码
  }
  

• 缓存extensions与theme对象
  每次组件重渲染时，直接创建extensions数组或传入theme会生成新的对象引用，导致CodeMirror实例重新初始化，进而丢失样式。使用useMemo缓存这些对象，避免不必要的实例重建：

  export default function Editor({ setLoader, activeCode, setActiveCode }) {
      const [code, setCode] = useState("");
  
      const extensions = useMemo(() => {
          return [javascript({ jsx: true }), hyperLink()];
      }, []);
  
      const theme = useMemo(() => tokyoNight, []);
  
      return (
          <CodeMirror
              value={code}
              lang="js"
              extensions={extensions}
              onChange={(val) => setCode(val)}
              theme={theme}
              highlightSelectionMatches={true}
              style={{
                  width: "90%",
                  height: "300px",
                  position: "relative",
                  marginBottom: "5%",
                  fontSize: "14px", // 原代码fontSize设为5px可能是笔误，建议修正
              }}
          />
      );
  }
  

• 处理Hydration不匹配（可选）
  若activeCode来自服务端数据，可能存在客户端与服务端初始值不匹配的情况，引发hydration异常导致样式失效。通过useEffect延迟初始化code状态，确保仅在客户端渲染后设置值：

  import { useState, useMemo, useEffect } from 'react';
  
  export default function Editor({ setLoader, activeCode, setActiveCode }) {
      const [code, setCode] = useState("");
  
      useEffect(() => {
          setCode(activeCode || "");
      }, [activeCode]);
  
      // 其余代码不变
  }
  

• 检查Vercel构建配置
  若使用Next.js静态导出模式(output: 'export')，需确保构建过程中未忽略react-codemirror的样式文件。@uiw/react-codemirror的样式通过JS动态注入，正常情况下无需额外配置，但可确认next.config.js中未禁用样式相关的打包逻辑。

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