React 18 Codepen Template

JavaScript
1

I know i have been frustrated not being able to get React 18 imports to work on Codepen, and getting a variety of errors that seem like they should “just work”. For anyone that wants to use React 18, here is a template that imports the scripts using the HTML area with cross origin.

If you want to use React 17 instead you can use this oen:

2

What makes you say it isn’t supported?

import React from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";

function App() {
  return <h1>React 18</h1>;
}

const root = createRoot(document.getElementById("root"));
root.render(<App />);
3

You’re importing in the JS area just like my example imports in the HTML area. This isn’t how codepen works with prior versions, where you can add them using the JS settings. So you have to figure it out instead of it ‘just working’. So we both have solved a problem.

4

You can use settings, either “Add External Scripts/Pens” which is the same as adding them to the HTML, or use “Add Packages” which is a module import.

Just remember, ReactDOM should be added after React.

Here is a fork of your Codepen with React added using the settings just in case it isn’t clear what I mean. You can fork it if you want, I’m going to delete it at some point.

5

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