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

[3gwebtrain]

I am trying to switch the rendering method according to the env flag. 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

[tariqule]

The error you're seeing suggests that container is undefined, which is causing the error when attempting to access _internalRoot. This could happen if the element with the ID of "root" doesn't exist in the HTML document.

you could try something like this, this would solve your issue

document.addEventListener('DOMContentLoaded', () => {
  renderDom();
});

[arthwood]

@3gwebtrain see my comment here.

[gaearon]

There are two different issues here.

The first issue is that calling root.render without root as the this context is not supported.

So this won't work:

const render = createRoot(domNode).render
render(<App />)

You should always write it like this:

const root = createRoot(domNode)
root.render(<App />)

The second issue is that createRoot and hydrateRoot have different signatures but you're trying to use them in the same way. That's also incorrect. The second hydrateRoot argument is required but you are missing it and trying to render() later, which is not how it's supposed to be used. Please see the hydrateRoot documentation and examples.

Here is the fixed version of your code:

https://codesandbox.io/s/musing-ully-kyuics?file=/src/index.js

  const container = document.getElementById("root");
  const reactNode = (
    <StrictMode>
      <App />
    </StrictMode>
  );
  let root;
  if (process.env.SSR) {
    root = hydrateRoot(container, reactNode);
  } else {
    root = createRoot(container);
    root.render(reactNode);
  }

Note that hydrateRoot is done in a single step because we're specifying which tree to hydrate it with. It doesn't need an additional render. However, createRoot needs a full render because it's initially empty.

Hope this helps.