preload.ts can't see root element when implementing React #220

kyleatcolenso · 2025-01-22T01:05:37Z

React won't latch onto the document as it can't find the root we're giving createRoot. Here's my implementation built off the Webpack + Typescript template.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>

  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/App.tsx

import { createRoot } from 'react-dom/client';

console.log(document); // #document object
console.log(document.body); // null
console.log(document.getElementById('root')); // null

const root = createRoot(document.getElementById("root"));
root.render(<h2>Hello from React!</h2>);

preload.ts

import './App';

tsconfig.json

{
  "compilerOptions": {
     ...
    "jsx": "react-jsx",
     ...
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["src/**/*"]
}

Problems

When running npm start, I am presented with these errors

Note that the first three console.logs coincide with the logs from src/App.tsx.

React version: 18.3.1
Node version: 20.10.0
Yarn version: 1.22.22

The text was updated successfully, but these errors were encountered:

kyleatcolenso · 2025-01-22T02:54:15Z

For those looking for a solve, wait for the DOM content to load

import { createRoot } from "react-dom/client";
import Layout from "./components/Layout/Layout";

document.addEventListener("DOMContentLoaded", () => {
  const root = createRoot(document.getElementById("root"));
  root.render(<Layout />);
});

kyleatcolenso closed this as completed Jan 22, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

preload.ts can't see root element when implementing React #220

preload.ts can't see root element when implementing React #220

kyleatcolenso commented Jan 22, 2025 •

edited

Loading

kyleatcolenso commented Jan 22, 2025

preload.ts can't see root element when implementing React #220

preload.ts can't see root element when implementing React #220

Comments

kyleatcolenso commented Jan 22, 2025 • edited Loading

Problems

kyleatcolenso commented Jan 22, 2025

kyleatcolenso commented Jan 22, 2025 •

edited

Loading