React 19 isnt rendering on Codepen

1

<div id="app"></div>

import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

const App = () => <h1>Hello</h1>

ReactDOM.render(<App/>, document.getElementById('app'))

Anything wrong with it? The errors in the console says:
TypeError: ReactDOM.render is not a function. (In ‘ReactDOM.render( /#PURE/React.createElement(App, null), document.getElementById(“”))’, ‘ReactDOM.render’ is undefined)
at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-82416ff4-4d94-d605-fbea-5a1aaba26455:6

TypeError: ReactDOM.render is not a function. (In ‘ReactDOM.render( /#PURE/React.createElement(App, null), document.getElementById(‘app’))’, ‘ReactDOM.render’ is undefined)
at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-18e190e7-deea-63be-6367-e93f0dad6046:6

EDIT: Different project, same issue: https://codepen.io/yasingunaydiin/pen/ZYzyVvm

2

ChatGPT suggested me write this:

import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom/client";

const App = () => <h1>Hello, React!</h1>;

// Target the app element
const appElement = document.getElementById("app");

// Create the root and render
const root = ReactDOM.createRoot(appElement);
root.render(<App />);

This works. But why does mine not work? I’m watching a tutorial and theirs work.

3

check what version of react they are using and you are using
each version of react works slighly differently

4

Yeah no,
this should work
ReactDOM.render(<App/>, document.getElementById('root'));
But it does not work. I’ve watched 20 videos now and nothing works. GPT cant figure it out either.

What I have now:

import React, { useState } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import ReactMarkdown from "https://cdn.skypack.dev/react-markdown";

function App() {
  const [markdownText, setMarkdownText] = useState("# Hello, React!");

  return (
    <div>
      <h1>Hello</h1>
      <ReactMarkdown>{markdownText}</ReactMarkdown>
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));
5

As I said, different versions of react do different things
the method you are using is deprecated since 2022. If you are using React 19 it will not work. Are they using React 18 or earlier?
When was the tutorial you are watching made?

GPT is not useful. It doesn’t know things.
Have you tried googling?

6

I’m using react 18.

https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js

These are inside codepen settings.

I have tried Google’ing. I could only find issues and fixes of people with typos and nothing thats really an issue which is why i wanted to created a forum post.

7

Just to confirm, have you also enabled Babel pre-processing?

image
image503×132 7.86 KB

8

Hi @yasingunaydin

You can follow these two options:

  1. remove the esm links
  2. read more in this post

Happy coding

9

Yes. I have enabled it. Please see my pen here: https://codepen.io/yasingunaydiin/pen/ZYzyVvm

10

Please see my code here: https://codepen.io/yasingunaydiin/pen/ZYzyVvm

11

what issue are you having now? I don’t see any error in your pen

12

Here you go: https://codepen.io/yasingunaydiin/pen/OPLjMvm

13

there you need to do a couple of things:
you can remove the imports in the settings of the pen
you can use

import React from "https://esm.sh/react@19";
import ReactDOM from "https://esm.sh/react-dom@19/client";

as import

then you can write

function App() {
  return (
  <div>Hello</div>)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Here is a fixed pen: https://codepen.io/nethleen/pen/YPKxwgG

the “Hello” is behind the button of the test suite

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.