React(JSX)集成ACE编辑器报错：ReferenceError: window is not defined

核心原因 #

react-ace依赖浏览器环境的window对象初始化编辑器实例，若组件在服务端渲染（SSR）或DOM未完成挂载时就执行初始化逻辑，就会触发该错误。以下是具体解决方案：

方案1：动态导入+禁用SSR（适配Next.js等SSR框架） #

通过React的lazy和Suspense实现组件懒加载，同时将ace的资源文件放在useEffect中加载，确保仅在浏览器环境执行：

import React, { useState, useEffect, lazy, Suspense } from "react";
const AceEditor = lazy(() => import("react-ace"));

const AceEditorTest = () => {
  const [search, setSearch] = useState('');

  useEffect(() => {
    // 按需加载ace的语言模式、主题和扩展工具
    import("ace-builds/src-noconflict/mode-java");
    import("ace-builds/src-noconflict/theme-github");
    import("ace-builds/src-noconflict/ext-language_tools");
  }, []);

  // 修正onChange回调：react-ace直接返回编辑器内容，而非事件对象
  function onChange(newValue) {
    setSearch(newValue);
    console.log("change", newValue);
  }

  return (
    <Suspense fallback={<div>加载编辑器中...</div>}>
      <AceEditor
        mode="java"
        theme="github"
        onChange={onChange}
        name="UNIQUE_ID_OF_DIV"
        editorProps={{ $blockScrolling: true }}
      />
    </Suspense>
  );
}
export default AceEditorTest;

方案2：检查浏览器环境后渲染（非SSR项目） #

如果是纯客户端渲染项目，可通过判断window是否存在，延迟编辑器的渲染时机：

import React, { useState, useEffect } from "react";

const AceEditorTest = () => {
  const [isBrowser, setIsBrowser] = useState(false);
  const [search, setSearch] = useState('');

  useEffect(() => {
    // 确认当前处于浏览器环境
    setIsBrowser(true);
    // 加载ace资源
    import("ace-builds/src-noconflict/mode-java");
    import("ace-builds/src-noconflict/theme-github");
    import("ace-builds/src-noconflict/ext-language_tools");
  }, []);

  function onChange(newValue) {
    setSearch(newValue);
    console.log("change", newValue);
  }

  // 未进入浏览器环境时显示加载占位
  if (!isBrowser) {
    return <div>加载中...</div>;
  }

  // 动态导入AceEditor组件
  const AceEditor = require("react-ace").default;
  return (
    <AceEditor
      mode="java"
      theme="github"
      onChange={onChange}
      name="UNIQUE_ID_OF_DIV"
      editorProps={{ $blockScrolling: true }}
    />
  );
}
export default AceEditorTest;

额外修正：原代码的小问题 #

原onChange函数中使用e.target.value是错误的——react-ace的onChange回调直接返回编辑器的内容字符串，而非事件对象；同时原代码中newValue未定义，需修正为回调参数的变量名。

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