This error occurs when JSX code is used in a file without properly importing React. With React 17+, the new JSX transform eliminates the need for explicit imports, but configuration issues or older React versions may still cause this error.
React components use JSX syntax, which is transformed into function calls at compile time. Before React 17, every file using JSX needed to import React to have it in scope. React 17 introduced a new JSX transform that automatically imports the necessary runtime functions, but if your tooling isn't configured correctly or you're using an older React version, you'll see this error when the browser tries to execute the transformed code. The error message indicates that the JavaScript code tries to reference the `React` object, but it hasn't been imported or isn't available in the current scope.
First, verify which version of React you have installed. Open your package.json and look for the react dependency version.
Run:
npm list reactIf you're on React 17 or later, you should not need to import React for JSX. If you're on React 16 or earlier, you must import React in every file using JSX.
If you're using React 16 or earlier, add this import to the top of your file:
import React from 'react';Example:
import React from 'react';
function MyComponent() {
return <div>Hello World</div>;
}
export default MyComponent;With React 17+, you don't need to import React, but your build tools must be configured for the automatic JSX transform.
If using Create React App 4.0+:
No configuration needed—it's automatic.
If using TypeScript:
Ensure your tsconfig.json has:
{
"compilerOptions": {
"jsx": "react-jsx"
}
}If using Babel:
Ensure your .babelrc or babel.config.js has:
{
"presets": [
[
"@babel/preset-react",
{ "runtime": "automatic" }
]
]
}If you've upgraded to React 17 or later and are using the new JSX transform, you can remove import React from 'react' from your files.
Before:
import React from 'react';
function App() {
return <h1>Hello</h1>;
}After:
function App() {
return <h1>Hello</h1>;
}This works automatically with React 17+ and proper tooling configuration.
Make sure React and React DOM are properly installed:
npm install react react-domIf you've recently deleted node_modules or moved the project, reinstall all dependencies:
rm -rf node_modules package-lock.json
npm installIf you're using a custom webpack, Parcel, or other bundler setup, ensure the JSX loader is configured.
Webpack example:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-react', { runtime: 'automatic' }]
]
}
}
}
]
}JSX Pragma Compatibility: If you're using a CSS-in-JS library (like Emotion) with JSX pragmas, be aware that JSX pragmas (/** @jsx */) may conflict with the new automatic runtime. As a workaround, use /** @jsxRuntime classic */ to revert to the classic transform for that file.
ESLint Configuration: Older ESLint rules required React to be in scope (react/jsx-no-undef and react/react-in-jsx-scope). With React 17+, these rules can generate false positives. Update your ESLint config to disable react-in-jsx-scope if using React 17+:
{
"rules": {
"react/react-in-jsx-scope": "off"
}
}Backward Compatibility: The new JSX transform has been backported to React 15.7.0, React 16.14.0, and React 0.14.10, so you can use modern JSX patterns without upgrading beyond the minimum version.
Module Resolution: If you have TypeScript with skipLibCheck enabled, ensure @types/react is installed: npm install --save-dev @types/react.
Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React