Referenceerror: react is not defined

The JavaScript error message “ReferenceError: React is not defined” commonly appears when the React library is not correctly imported or referenced in a project.

Which React is a JavaScript library specifically designed for creating user interfaces, particularly for web applications.

In this article, we will delve into the reasons behind this error, and present solutions to resolve and avoid the error.

What is Referenceerror: react is not defined?

The JavaScript error message “ReferenceError: React is not defined” commonly appears when the React library is not correctly imported or referenced in a project.

Here are a few possible reasons for encountering this error:

• Missing import statement
• Incorrect script order
• React not installed
• React version mismatch

Referenceerror: react is not defined – Solutions

Since we already know what are the causes of the error, here are their solutions.

1. Missing import statement

If you’re using React in a JavaScript file, you need to import it at the top of the file. The import statement should look something like this:

import React from 'react';

2. Incorrect script order

But if you’re using React in an HTML file, make sure the script tag that includes the React library appears before any other scripts that use React.

For example:

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<!-- Your other scripts -->

3. React not installed

Meanwhile, if you’re working in a Node.js environment, ensure that React is installed as a dependency. You can install React using a package manager like npm or yarn.

For example:

npm install react

4. React version mismatch

If you have multiple versions of React installed, there may be a conflict.

Make sure you’re using the correct version of React in your project and that the import statement or script tag corresponds to the installed version.

Double-checking these aspects should help resolve the “ReferenceError: React is not defined” error.

Example of fixing referenceerror react is not defined

There are a few ways to fix this error. One way is to make sure that you have imported React at the top of your file like this:

import React from 'react';. 

Then if you are using Babel and React 17, you might need to add “runtime”: “automatic” to your Babel config.

In your .babelrc config file, this would be:

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {"runtime": "automatic"}]
  ]
}

This enables a new JSX transform introduced in React 17 that uses the React runtime to generate the necessary code for JSX expressions.

If you are using Webpack, you can add the ‘react’ property to the externals property in webpack.config.json.

To do this, you write:

 externals: { 'react': 'React' },

This is to tell Webpack that React is a global variable.

Anyway besides this error, we also have here fixed errors that might help you when you encounter them.

• Uncaught referenceerror google is not defined
• Importerror: cannot import name ‘parse_rule’ from ‘werkzeug.routing’

Conclusion

To summarize, a ReferenceError is a JavaScript error that arises when an undefined variable or function is referenced.

By comprehending the causes of ReferenceErrors and following the troubleshooting steps outlined, you can effectively tackle and resolve these errors in your JavaScript code.

It is important to be mindful of import statements, review variable names, and debug scope-related issues.

I think that’s all for this error. I hope you have gained something to fix their issues.

Until next time! 😊

Why React ReferenceError fires

React ReferenceErrors usually come from missing imports (useState, useEffect not imported from React), destructuring hooks incorrectly, or accessing state variables outside their component scope.

Common triggers

• Missing React import. Modern React 17+ auto-imports for JSX, but hooks still need explicit import: import { useState } from 'react';
• Component not exported/imported. Using <MyComponent /> without importing it fires ReferenceError.
• Variable outside scope. Accessing state or props in a helper function defined outside the component fails.
• Destructuring typo. const { setValue } when useState returned [value, setValue].
• Next.js SSR access to window/document. Server-side rendering has no browser globals — guard with typeof checks or useEffect.

Diagnostic pattern

// BAD — hook not imported
function Counter() {
    const [count, setCount] = useState(0);  // ReferenceError: useState is not defined
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// GOOD — explicit import
import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Best practices

• Use ESLint with react-hooks plugin. Catches missing hook imports before runtime.
• Configure eslint-plugin-react. Warns on undefined JSX components.
• Use TypeScript. All ReferenceErrors caught at compile time.
• Guard SSR-only code. if (typeof window !== "undefined") { ... } or useEffect(() => { ... }, []);

Glay Eliver

Programmer & Technical Writer at PIES IT Solution

Glay Eliver is a programmer and writer at PIES IT Solution, author of over 600 tutorials at itsourcecode.com. Specializes in JavaScript tutorials, Microsoft Office how-tos (Excel, Word, PowerPoint), and Python error debugging covering ImportError, TypeError, AttributeError, ModuleNotFoundError, and JavaScript ReferenceError. Authored several of the site’s highest-traffic Excel and MS Office reference articles.

Expertise: JavaScript · MS Excel · MS Word · MS PowerPoint · Python · Python ImportError · Python TypeError · Python AttributeError · ModuleNotFoundError · JavaScript ReferenceError · Pygame
 · View all posts by Glay Eliver →