JSX n'est pas autorisé dans les fichiers avec l'extension ' .js' avec eslint-config-airbnb

Question

J'ai installé eslint-config-airbnb qui est censé pré configurer ESLINT pour React :

Notre exportation par défaut contient toutes nos règles ESLint, y compris ECMAScript 6+ et React. Il nécessite eslint, eslint-plugin-import, eslint-plugin-react, et eslint-plugin-jsx-a11y.

Mon .eslintrc en étendant sa 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
  }
}

Malheureusement, j'obtiens l'erreur suivante lors de la vérification d'un fichier .js contenant du code React JSX :

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

eslint-config-airbnb n'était-il pas déjà configuré pour supporter JSX, comme indiqué ?

Que faut-il faire pour supprimer cette erreur ?

Answer 1

Soit vous changez vos extensions de fichiers en .jsx comme indiqué ou désactiver le jsx-filename-extension règle. Vous pouvez ajouter les éléments suivants à votre configuration pour autoriser .js extensions pour JSX.

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

Answer 2

Cela fonctionne pour moi. J'espère pouvoir vous aider.

1. désactiver l'extension jsx-filename en .eslintrc :

   "règles" : { "react/jsx-filename-extension" : [0] }

2. sur webpack.config.js :

   résoudre : { extensions : ['.js', '.jsx'] },

Answer 3

Traitez-moi d'imbécile si cela ne fonctionne pas pour vous.

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

Answer 4

Si vous ne voulez pas changer l'extension de votre fichier, vous pouvez exporter une fonction qui renvoie jsx, puis importer et appeler cette fonction dans votre fichier js.

// greeter.jsx

import React from 'react';

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

et ensuite

// index.js

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

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

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

Answer 5

Suivant Documentation sur React :

Chaque élément JSX n'est que du sucre syntaxique pour appeler React.createElement(component, props, ...children).

Suivant Le guide de style d'Airbnb :

Ne pas utiliser React.createElement à moins que vous initialisiez l'application à partir d'un fichier qui n'est pas JSX. .

Tu pourrais faire ça :

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