Categories
React Answers

How to Fix the ‘”JSX not allowed in files with extension ‘ .js'” Error with eslint-config-airbnb When Developing a React App?

Spread the love

Sometimes, we want to fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app.

In this article, we’ll look at how to fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app.

Fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb When Developing a React App

To fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app, we can add the "react/jsx-filename-extension" to allow files with the .js extension to include JSX code in our .eslintrc file.

To do this, we write:

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

to allow JSX code to be added to files with the .js and .jsx extensions.

Conclusion

To fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app, we can add the "react/jsx-filename-extension" to allow files with the .js extension to include JSX code in our .eslintrc file.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *