[Error Debugging] This experimental syntax requires enabling one of the following parser plugin(s): ‘jsx, flow, typescript’

This experimental syntax requires enabling one of the following parser plugin(s): ‘jsx, flow, typescript’.

Motivation

I was trying to update babel-eslint to @babel/eslint-parser in my react project since babel-eslint has been deprecated. Once I installed @babel/eslint-parser, I got the following error: This experimental syntax requires enabling one of the following parser plugin(s): ‘jsx, flow, typescript’ in jsx files.

Debugging

Knowing that I do not get the error when I use babel-eslint, I assumed there is something that I missed while updating babel-eslint to @babel/eslint-parser. After some research, I realised that I did not have @babel-preset-react

• A preset is a set of plugins used to support particular language features.
• Babel is a Javascript compiler. We need it to be able to use compatible versions of JavaScript in current and older browsers or environments.

Stack of my project: Nextjs, Typescript

How I resolved

I installed @babel-preset-react and input the code below in my .eslintrc

...
"parser": "@babel/eslint-parser",
"parserOptions": {
   ...
   "babelOptions": {
      "presets": ["@babel/preset-react"]
   },
   ...
},
...

Conclusion

I had to spend a few hours resolving this error. I hope my article can save your time somehow!