Uncaught ReferenceError: React is not defined

Align your project with React & dependencies

Adjust to the latest React

Careful with those React 17 tutorials. They aren't always updated to reflect that the new JSX transform no longer requires React imported in each file. Check your environment aligns with the new JSX transform by refreshing your React version and tweaking your Babel and Webpack configuration to match.

Harmonize dependencies

Ensure your project is singing the same tune with its React and Babel versions. Discordance here can lead to unexpected sour notes. Use npm list react and npm list @babel/core to check current installed versions. It will save your eardrums a world of pain.

Adjust Webpack & externals

Made the rookie mistake of using an external CDN for React or set React as an external in Webpack, preventing it from bundling? Get your Webpack adjustments on. Remove any externals configurations that include React, or plug in webpack.ProvidePlugin to add React just where it's needed, like a band aid for your code.

Sniff out and mend structure errors

Import statements need accuracy

Scour your import statements for glaring typos or syntax errors. Autocorrect does us dirty sometimes. An incorrect path or simple typo can cause the location of React to slip through the cracks.

Decode file & code structure

Don your detective glasses and excavate your file and code structure to uncover any secret mistakes. Sounds like a nerd version of Indiana Jones, right? Any misplaced code blocks or incorrectly nested files can give birth to module resolution issues and the irritating reference error.

When in doubt, crowdsource

If you've got your environment checks and balances in place but still, the issues persist, socialize your problem. Aka hit the React community or forums. Spotting less apparent integration issues, especially with Rails, happens a lot faster when you have more sets of eyes on the issue.

Smoothly integrate with other tech piles

Clash of the titans

Cross-reference your codebase to identify battles of conflicts between other libraries or packages. The uncanny X-men of code – aka unexpected manipulators like a jQuery plugin – tweaking the DOM could be ensnaring React's DOM updates.

Rails loves React

Integration of Rails and React should be smoother than a hot knife through butter. Ensure your gem versions are up-to-date and adjust the Rails webpacker settings to suit React. As they say, keep your friends close, but your frameworks closer.

Let Webpack handle dependencies

Using Webpack? Great, now remember to avoid explicitly requiring React in your code. Webpack's more than capable of handling the dependency resolution for you, thus mitigating reference error risks.

Put a shim in it

Got a complex setup on your hands? Consult the shimming solutions in the handy Webpack documentation. Helps when global variables or modules are needed across your project.