React Draft Wysiwyg集成报错：Uncaught TypeError: setImmediate is not a function

问题场景 #

使用React Draft Wysiwyg富文本编辑器，结合Laravel + Vite + React技术栈，编辑器实现代码如下：

export default function TextEditor() {
    const [editorState, setEditorState] = useState(() =>
        EditorState.createEmpty()
    );

    const handleEditorState = editorState => {
        setEditorState(editorState);
    };

    return (
        <Editor
            editorState={editorState}
            toolbarClassName="toolbarClassName"
            wrapperClassName="wrapperClassName"
            editorClassName="editorClassName"
            onEditorStateChange={handleEditorState}
        />
    );
}

Vite配置文件vite.config.js如下：

plugins: [
    laravel({
        input: "resources/js/app.jsx",
        ssr: "resources/js/ssr.jsx",
        refresh: true,
    }),
    react(),
],
define: {
    global: {},
},

运行后控制台抛出错误：Uncaught TypeError: setImmediate is not a function

解决方案 #

方案1：直接在Vite配置中全局映射setImmediate #

修改vite.config.js的define配置，将setImmediate映射为浏览器支持的setTimeout：

plugins: [
    laravel({
        input: "resources/js/app.jsx",
        ssr: "resources/js/ssr.jsx",
        refresh: true,
    }),
    react(),
],
define: {
    global: {
        setImmediate: "setTimeout"
    },
},

方案2：使用Node全局变量Polyfill插件 #

如果后续还遇到其他Node.js API缺失的问题，可安装专用polyfill插件：

1. 安装依赖：

npm install @esbuild-plugins/node-globals-polyfill --save-dev

2. 修改vite.config.js：

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.jsx",
            ssr: "resources/js/ssr.jsx",
            refresh: true,
        }),
        react(),
    ],
    optimizeDeps: {
        esbuildOptions: {
            define: {
                global: 'globalThis',
            },
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    process: true,
                    buffer: true,
                    setImmediate: true
                }),
            ],
        },
    },
});

原因说明 #

setImmediate是Node.js环境专属API，浏览器原生不支持。React Draft Wysiwyg依赖的底层库（如draft-js）内部使用了该API，而Vite默认不会为浏览器环境注入Node.js全局API的polyfill，因此需要手动配置补全缺失的函数。

内容的提问来源于stack exchange，提问作者Naung Ye Htet