Cannot read properties of undefined (reading '_internalRoot')

Question

I am trying to switch the rendering method according to the env flag. since i am much new for react needs the help to understand the correct way. getting an error as,

TypeError: Cannot read properties of undefined (reading '_internalRoot')

here is my conditional rendering code:

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

import App from "./App";


const renderDom = () => {
  const container = document.getElementById("root");
  const renderType = process.env.SSR
    ? hydrateRoot(container).render
    : createRoot(container).render;
  renderType(
    <StrictMode>
      <App />
    </StrictMode>
  );
};

renderDom();

Live Demo

Answer 1

You are extracting the render method from the object, and in the process you are loosing its context.

Read more about this at How to access the correct `this` inside a callback

---

You need to use

 const root = process.env.SSR
    ? hydrateRoot(container)
    : createRoot(container);

  root.render( ... );

Updated demo.