This error occurs when JSX syntax is not properly compiled to JavaScript. Your code contains JSX (the `<` character starting an HTML-like tag) but Babel or another transpiler has not been configured to transform it, causing the parser to fail.
JSX is not valid JavaScript on its own—it is a syntax extension that must be transformed into regular JavaScript function calls before the code runs. When you write `<Component />`, the JavaScript parser sees the `<` character and doesn't recognize it as valid JavaScript syntax because it doesn't know how to interpret JSX. This error means your build tool or runtime environment has not been configured to transpile JSX to JavaScript. The error typically manifests as 'SyntaxError: Unexpected token <' at the line where JSX appears.
First, check if you have the necessary Babel packages installed:
npm list @babel/core @babel/preset-reactIf these packages are missing, install them:
npm install --save-dev @babel/core @babel/preset-react @babel/preset-envThese packages are essential for transforming JSX into JavaScript.
Create a .babelrc file (or babel.config.js for larger projects) in your project root with the following content:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}The @babel/preset-react preset tells Babel how to transform JSX syntax. The @babel/preset-env preset handles modern JavaScript features.
If you're using webpack, make sure babel-loader is installed and configured:
npm install --save-dev babel-loaderThen update your webpack.config.js to process JSX files:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}This tells webpack to use babel-loader for all .js and .jsx files, applying your Babel configuration.
Build tools cache configurations. After making Babel changes:
# Delete webpack cache
rm -rf node_modules/.cache
# Or for specific tools:
rm -rf .next # Next.js
rm -rf dist # General build output
# Restart your dev server
npm startCache issues commonly prevent configuration changes from taking effect.
If you're using Create React App (CRA), Babel is already configured. This error usually indicates:
1. A naming issue: make sure your file uses .jsx extension or is properly imported
2. An import/export problem: verify your component is properly exported
3. A dependency issue: try npm install or npm start again
Create React App handles all JSX transpilation automatically, so you shouldn't see this error. If you do, try:
rm -rf node_modules package-lock.json
npm install
npm startEnsure your React components are properly exported:
// Correct: Named export
export function MyComponent() {
return <div>Hello</div>;
}
// Or default export
export default function MyComponent() {
return <div>Hello</div>;
}And properly imported:
import MyComponent from './MyComponent';
// or
import { MyComponent } from './MyComponent';Missing or incorrect exports can cause similar errors.
For browser-based JSX (without a build tool), you can use Babel standalone with a script tag:
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
return <h1>Hello World</h1>;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
</script>Note the type="text/babel" attribute, which tells Babel to process the script. However, this approach is not recommended for production applications. For Node.js environments (like server-side rendering or testing), use @babel/register to hook into require and transpile JSX on the fly. In Next.js and Vite, JSX support is built-in and requires no additional configuration.
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