To whom using CRA and ended up to this question, can use customize-cra
and react-app-rewired
packages to override babel presets in CRA.
To do this, create a config-overrides.js
in the root and paste this code snippet in it.
const { override, addBabelPreset } = require('customize-cra');
module.exports = override(
addBabelPreset('@emotion/babel-preset-css-prop'),
addBabelPreset([
'@babel/preset-react',
{
runtime: 'automatic',
importSource: '@emotion/react',
},
]),
);
And update scripts in package.json with the ones below.
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
Sometimes, we want to fix the ‘Uncaught ReferenceError: React is not defined’ error when developing React apps.
In this article, we’ll look at how to fix the ‘Uncaught ReferenceError: React is not defined’ error when developing React apps.
Fix the ‘Uncaught ReferenceError: React is not defined’ Error When Developing React Apps
To fix the ‘Uncaught ReferenceError: React is not defined’ error when developing React apps, we can add the 'react'
property to the externals
property in webpack.config.json
.
To do this, we write:
externals: {
'react': 'React'
},
to tell Webpack that React
a global variable.
Also, we can add import React from 'react';
to the top of each component file to fix the error.
Conclusion
To fix the ‘Uncaught ReferenceError: React is not defined’ error when developing React apps, we can add the 'react'
property to the externals
property in webpack.config.json
.
Also, we can add import React from 'react';
to the top of each component file to fix the error.
Web developer specializing in React, Vue, and front end development.
View Archive
Comments
jtomchak
added a commit
to mediadevelopers/media-jams
that referenced
this issue
Oct 30, 2020
This was referenced
Nov 1, 2020
karlhorky
added a commit
to karlhorky/next-js-example-sep-2020
that referenced
this issue
Nov 1, 2020
This was referenced
Nov 2, 2020
kodiakhq bot
pushed a commit
that referenced
this issue
Nov 19, 2020
kamermans
pushed a commit
to kamermans/next.js
that referenced
this issue
Dec 14, 2020
mcgoooo
added a commit
to mcgoooo/mine-sweeper
that referenced
this issue
Jan 28, 2021
mcgoooo
added a commit
to mcgoooo/mine-sweeper
that referenced
this issue
Jan 28, 2021
vercel
locked as resolved and limited conversation to collaborators
Jan 27, 2022
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.
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! 😊
Всем привет, возникла проблема при использовании useContext, но до него я так и не дошел, он ругается в самом начале, когда я создаю этот контекст
Пишет вот такую ошибку
Compiled with problems:X
ERROR
[eslint]
src/components/Context/CreateContect.js
Line 3:35: 'React' is not defined no-undef
Search for the keywords to learn more about each error.
Вот код создания контекста
import {createContext} from "react";
export const CreateFieldContext = createContext({test: '123'})
А вот где я его пытаюсь передать
import Header from "./components/Header/Header";
import {Routes} from 'react-router'
import './index.css'
import {Route} from "react-router-dom";
import CreateField from "./components/CreateField/CreateField";
import {CreateFieldContext} from "./components/Context/CreateContext";
function App() {
return (
<div className="App">
<Header/>
<Routes>
<CreateFieldContext.Provider>
<Route path='/create' element={<CreateField/>}/>
</CreateFieldContext.Provider>
</Routes>
</div>
);
}
export default App;