Common Errors When Setting Up React via CDN and How to Fix Them

Common Errors When Setting Up React via CDN and How to Fix Them

The CDN setup is simple, but beginners hit the same handful of errors. Here are the most common ones and their fixes.

React is not defined

This means the React script did not load or you used React before the script tag ran. Make sure the script tags are in the head or before your code, and that you have an internet connection.

ReactDOM is not defined

You loaded React but forgot ReactDOM, or loaded them in the wrong order. React core and ReactDOM are separate; you need both, with React first.

createRoot is not a function

You are using an old ReactDOM version that only had ReactDOM.render. Update to React 18+, which uses createRoot. Old tutorials cause this error constantly.

JSX not working in a script tag

A regular script tag does not understand JSX. You need type="text/babel" and the Babel standalone script, or a build tool. Without Babel, JSX throws syntax errors.

Blank screen with no error

Usually the root element id does not match what your script grabs, or your JSX returns nothing. Check that the element exists and your render call targets it.

Cross-origin or CDN blocking errors

Some networks block CDNs. If scripts fail to load, switch to a different CDN or install React locally with npm instead.

The Pattern Behind All of These

Most CDN errors come from script order, wrong versions, or missing Babel for JSX. Reading the error message and checking these three things fixes almost every CDN setup problem.