JSX not allowed in files with extension ' .js' with eslint-config-airbnb

Question

I've installed eslint-config-airbnb that is supposed to pre configure ESLINT for React:

Our default export contains all of our ESLint rules, including ECMAScript 6+ and React. It requires eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y.

My .eslintrc extending its configuration:

{ "extends": "eslint-config-airbnb",
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }],
    "react/no-multi-comp": 0,
    "import/default": 0,
    "import/no-duplicates": 0,
    "import/named": 0,
    "import/namespace": 0,
    "import/no-unresolved": 0,
    "import/no-named-as-default": 2,
    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
    "indent": [2, 2, {"SwitchCase": 1}],
    "no-console": 0,
    "no-alert": 0,
    "linebreak-style": 0
  },
  "plugins": [
    "react", "import"
  ],
  "settings": {
    "import/parser": "babel-eslint",
    "import/resolve": {
      "moduleDirectory": ["node_modules", "src"]
    }
  },
  "globals": {
    "__DEVELOPMENT__": true,
    "__CLIENT__": true,
    "__SERVER__": true,
    "__DISABLE_SSR__": true,
    "__DEVTOOLS__": true,
    "socket": true,
    "webpackIsomorphicTools": true
  }
}

Unfortunatelly I'm getting the following error when linting a .js file with React JSX code inside it:

 error  JSX not allowed in files with extension '.js'              react/jsx-filename-extension

Wasn't eslint-config-airbnb configured react to support JSX already, as stated ?

What should be done to remove that error ?

Solution 1

Either change your file extensions to .jsx as mentioned or disable the jsx-filename-extension rule. You can add the following to your config to allow .js extensions for JSX.

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

Solution 2

It's work for me. hope to help you.

1. disable jsx-filename-extension in .eslintrc:

   "rules": { "react/jsx-filename-extension": [0] }

2. in webpack.config.js:

   resolve: { extensions: ['.js', '.jsx'] },

Solution 3

Call me a dummy if it does not work for you

    "rules": {
        "react/jsx-filename-extension": [0],
        "import/extensions": "off"
    }

Solution 4

If you don't want to change your file extension, you can export a function that returns jsx, and then import and call that function in your js file.

// greeter.jsx

import React from 'react';

export default name => (
  <div>
    {`Hello, ${name}!`}
  </div>
);

and then

// index.js

import ReactDOM from 'react-dom';
import greeter from './components/greeter';

const main = document.getElementsByTagName('main')[0];

ReactDOM.render(greeter('World'), main);

Solution 5

Following React documentation:

Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children).

Following Airbnb's style guide:

Do not use React.createElement unless you’re initializing the app from a file that is not JSX.

You could do this:

    //index.js
    const app = React.createElement(App);
    ReactDOM.render(app, document.getElementById('root'));

View more solutions

Comments

[pixel 67]

gave you the vote for adding the webpack.config.js example.

[M Falanga]

If you don't want to change your filename extension or disable the rule, see this answer

[M Falanga]

I don't understand the downvote. Can somebody explain so I can be a better contributor?

[mkvlrn]

maybe it's because while this fix "works", it is, at best, a workaround. And including a workaround in multiple JS files throughout your project seems kinda hacky and unprofessional.

[M Falanga]

I agree that this technique isn't idiomatic React. However I have only come across this problem with my entrypoint. I would not recommend doing this across all files, as it would create awkward code. If that's your use case, then just modify the linter rules as suggested in the accepted answer.

[JanithaR]

This accepted answer does not disable the rule. It just simply allows .js files to contain JSX and what you've linked seems to create too much chaos in very large scale projects.

[Wachaga Mwaura]

The second "jsx" element in the array is unnecessary. The "js" element is sufficient since the rule already references the "jsx" scope.

[Iman Marashi]

Where is config file ?