React根据环境变量切换渲染方式时遇_internalRoot未定义错误求助

你遇到的错误是因为React 18里hydrateRoot的API设计和createRoot存在差异：

• createRoot(container)会返回一个根实例，你可以调用它的.render()方法渲染组件
• 但hydrateRoot是直接完成水合操作的函数，它不返回带有.render方法的对象，所以你试图取.render会得到undefined，调用时就触发了Cannot read properties of undefined错误。

正确的做法是分情况处理两种渲染逻辑，而不是试图统一成一个renderType变量：

import { StrictMode } from "react";
import { createRoot, hydrateRoot } from "react-dom/client";

import App from "./App";

const renderDom = () => {
  const container = document.getElementById("root");
  if (process.env.SSR) {
    // SSR环境下直接使用hydrateRoot完成水合
    hydrateRoot(container, (
      <StrictMode>
        <App />
      </StrictMode>
    ));
  } else {
    // 客户端环境下创建根实例并渲染
    const root = createRoot(container);
    root.render((
      <StrictMode>
        <App />
      </StrictMode>
    ));
  }
};

renderDom();

补充说明：

• 确保在SSR环境中，container元素内已经存在服务端渲染生成的HTML内容，否则hydrateRoot会报错
• 确认process.env.SSR环境变量已正确配置，能在构建/运行时被正确识别

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