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

103

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 .eslintrcextension de 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 peluchage d'un fichier .js avec le code React JSX à l'intérieur:

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

Eslint-config-airbnb n'a-t-il pas déjà été configuré pour prendre en charge JSX, comme indiqué?

Que faut-il faire pour supprimer cette erreur?

Mendes
la source

Réponses:

224

Changez vos extensions de fichier .jsxcomme mentionné ou désactivez la règle d' extension de nom de fichier jsx . Vous pouvez ajouter ce qui suit à votre configuration pour autoriser les .jsextensions pour JSX.

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}
Martin Mihaylov
la source
1
Si vous ne voulez pas changer votre extension de nom de fichier ou désactiver la règle, voir cette réponse
M Falanga
Cette réponse acceptée ne désactive pas la règle. Cela permet simplement aux fichiers .js de contenir JSX et ce que vous avez lié semble créer trop de chaos dans les projets à très grande échelle.
JanithaR
Le deuxième élément "jsx" du tableau n'est pas nécessaire. L'élément "js" est suffisant car la règle fait déjà référence à la portée "jsx".
Raymond Wachaga
17

C'est du travail pour moi. espère vous aider.

  1. désactiver l'extension de nom de fichier jsx dans .eslintrc:

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

  2. dans webpack.config.js:

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

Willard Wong
la source
2
vous a donné le vote pour ajouter l' webpack.config.jsexemple.
pixel 67
5

Appelez-moi un mannequin si cela ne fonctionne pas pour vous

    "rules": {
        "react/jsx-filename-extension": [0],
        "import/extensions": "off"
    }
droïde
la source
4

Si vous ne souhaitez pas modifier votre extension de 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>
);

puis

// index.js

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

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

ReactDOM.render(greeter('World'), main);
M Falanga
la source
Je ne comprends pas le vote défavorable. Quelqu'un peut-il expliquer pour que je puisse être un meilleur contributeur?
M Falanga
7
c'est peut-être parce que si ce correctif "fonctionne", c'est au mieux une solution de contournement. Et inclure une solution de contournement dans plusieurs fichiers JS tout au long de votre projet semble un peu piraté et non professionnel.
mkvlrn
Je suis d'accord que cette technique n'est pas idiomatique React. Cependant, je n'ai rencontré ce problème qu'avec mon point d'entrée. Je ne recommanderais pas de le faire sur tous les fichiers, car cela créerait du code gênant. Si tel est votre cas d'utilisation, modifiez simplement les règles de linter comme suggéré dans la réponse acceptée.
M Falanga
2

Pour expliquer la réponse de Martin , il semble qu'il n'est pas possible, actuellement, de l'utiliser JSXdans React Native. Un PR a été créé mais annulé en raison de préoccupations concernant la fragmentation et les conséquences inconnues d'avoir des choses comme index.ios.jsx. Je ne sais pas comment AirBnb fonctionne autour de cela ou s'ils le font, mais j'ai essentiellement utilisé le même rulesbloc que Martin.

Adam Burdette
la source
2

Suite à la documentation React :

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

En suivant le guide de style d'Airbnb :

N'utilisez pas React.createElement sauf si vous initialisez l'application à partir d'un fichier qui n'est pas JSX .

Vous pouvez faire ceci:

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