Referenceerror react is not defined

Referenceerror: react is not defined

by

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.

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! 😊

Leave a Comment