Support for the experimental syntax 'jsx' isn't currently enabled

javascript

babel-plugins

jsx-syntax

webpack-config

byNikita Barsukov·Jan 26, 2025

To resolve the 'jsx' syntax error, equip Babel with the right tools for React:

First, you need the Babel presets. Obtain them with the following command:
```
npm install @babel/preset-env @babel/preset-react --save-dev
```

Create a .babelrc file in your project base and configure it with the installed presets:

{ 
  // Our Babel survival kit 
  "presets": ["@babel/preset-env", "@babel/preset-react"] 
}

If you're using webpack, update your webpack.config.js by including the babel-loader configuration:

{
  // Handling missing syntax error like a boss
  test: /\.(js|jsx)$/,
  exclude: /node_modules/, // Bye bye, node modules
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-env', '@babel/preset-react'] // React & ES6+ goodies
  }
}

React in Javascript files is now good to go, provided your build tools are all set.

How to parse JSX? Babel plugins to the rescue

Utilizing Babel plugins

JSX syntax is a mystery for Babel unless you equip it with particular plugins. Get it with:

npm install @babel/plugin-syntax-jsx --save-dev

Then, add it into .babelrc's plugins section:

{ 
  // JSX decoder ring
  "plugins": ["@babel/plugin-syntax-jsx"]
}

Now, Babel can read your JSX even if it can't transform it.

Code execution

Combining yarn and WSL (Windows Subsystem for Linux) lets you run:

yarn webpack-dev-server --mode development

It's The express train to your local development server station!

Avoid duel with two config files

Choosing between babel.config.js and .babelrc can avoid Babel confusion. More often than not, .babelrc wins for its localized configurations.

Exclude node_modules in the webpack config. It's non-essential and might lead to unwanted conflicts:

{ 
  // Node Modules: You shall not pass
  exclude: /node_modules/ 
}

When sailing in WSL waters, beware of troubled symlinks. Direct directory route is safer.

More advice from a wise coder

Verify the troops

Ensure package.json has every Babel preset and plugin with the right versions. Regular updates prevent stale code:

yarn upgrade @babel/preset-env @babel/preset-react @babel/plugin-syntax-jsx

All loaders onboard

Double-check your webpack loaders. They should welcome .jsx on the ship:

{ test: /\.jsx?$/, /*...*/ }

Starting with Create React App

Want to skip the setup? Kick-off your project with Create React App:

npx create-react-app my-app

It equips Babel and webpack for an immediate start.

Use the force of the community

Documentations or forums can offer you help. Troubleshooting a dev environment gets easier with community knowledge.

Maximizing productivity

Harmonious environment

Choosing yarn and WSL ensure a consistent and production-like environment. Always employ yarn for its fast, reliable, and secure handling of dependencies.