SyntaxError: Support for the experimental syntax jsx isn’t currently enabled

JavaScript throws error “Support for the experimental syntax ‘jsx’ isn’t currently enabled” when either babel is not configured properly or there is script tag in JS file. In this article we will discuss about different solutions to resolve this error.

What is jsx?

First of all we should know what jsx is. It is xml in javascript. So, with the help of jsx, we can include tags like xml or html into JS directly. For eg. –

const myFunc = () => {
  return (
    <div></div>
  )
}

In this code, we have returned <div /> from myFunc() directly without using quotes (“”) as if it is the core keyword of javascript language.

Reasons of Error

There are multiple reasons for this error. Some of them are –

1. Using <script> tag in JS file
2. Babel not configured properly or missing preset-env and preset-react
3. Misconfigured jest

Let’s go through each of these one by one.

Using <script> tag in JS file

<script> tag is designed to be used in html file. But sometimes, due to code refactoring or any other reason, we might include them in JS file. Like this –

<script>
const myFunc = () => {
  return "My Function"
}
</script>

This is wrong. Because, a JS file doesn’t need to be explicitly be indicated by script tag. So, it will create Support for the experimental syntax ‘jsx’ isn’t currently enabled error. Check this codesandbox screenshot –

The solution is to not include script tag in js files –

const myFunc = () => {
  return "My Function"
}

Babel not configured properly or missing preset-env and preset-react

Another major reason for this error is misconfiguration of Babel. You need to check if preset-env and preset-react are missing from .babelrc or babel.config.js. Solutions are as follows –

1. Using .babelrc

Create a file with a name .babelrc in the root directory of your project, i.e. in the same level where package.json is placed.

After creating file, add the below code to it –

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

2. Using babel.config.js

Create a file with name babel.config.js in the same level as package.json and add the below code to it –

module.exports = {
    presets:[
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

3. Using webpack.config.js

If you are using webpack then you need to add preset-react in webpack.config.js file. Like this –

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: { presets: ['@babel/env','@babel/preset-react'] },
      },
    ...
    ]
}

4. Using tsconfig.json

If you are using typescript then you need to add jsx property pointing to react-jsx in compilerOptions in tsconfig.json file. Like this –

compilerOptions: {
  ...
  "jsx": "react-jsx",
  ...
}

Misconfigured jest

If you are using jest for unit tests, then it is required to configure it correctly. If it’s not, then JS will throw experimental syntax jsx error.

It should be configured like this –

If you are using typescript, open package.json and update it according to code below –

"jest": {
    ...
    
    "transform": {
       "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
    },
    
    ...
}

If not using typescript, then update package.json like this –

"jest": {
    ...
    
    "transform": {
       "^.+\\.(js|jsx)$": "babel-jest"
    },
    
    ...
}

Conclusion

In this article we saw different reasons for the syntax error jsx not enabled. We picked those causes and described their solutions one by one. Follow these solutions properly and you will most probably resolve your issue. If you still face the error then feel free to let me know in comments. I will analyze your case and will try to help.