JSX não permitido em arquivos com extensão '.js' com eslint-config-airbnb


102

Eu instalei eslint-config-airbnb que deve pré-configurar o ESLINT para React:

Nossa exportação padrão contém todas as nossas regras ESLint, incluindo ECMAScript 6+ e React. Requer eslint, eslint-plugin-import, eslint-plugin-react e eslint-plugin-jsx-a11y.

Minha .eslintrcextensão de sua configuração:

{ "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
  }
}

Infelizmente, estou recebendo o seguinte erro ao lintar um arquivo .js com o código React JSX dentro dele:

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

O eslint-config-airbnb não estava configurado para reagir para suportar JSX, conforme declarado?

O que deve ser feito para remover esse erro?

Respostas:


224

Altere suas extensões de arquivo .jsxconforme mencionado ou desative a regra jsx-filename-extension . Você pode adicionar o seguinte à sua configuração para permitir .jsextensões para JSX.

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

1
Se você não quiser alterar a extensão do nome do arquivo ou desativar a regra, consulte esta resposta
M Falanga

Essa resposta aceita não desabilita a regra. Ele simplesmente permite que os arquivos .js contenham JSX e o que você vinculou parece criar muito caos em projetos de escala muito grande.
JanithaR

O segundo elemento "jsx" na matriz é desnecessário. O elemento "js" é suficiente, pois a regra já faz referência ao escopo "jsx".
Raymond Wachaga

17

É trabalho para mim. espero ajudá-lo.

  1. desative a extensão do nome do arquivo jsx em .eslintrc:

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

  2. em webpack.config.js:

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


2
lhe deu o voto para adicionar o webpack.config.jsexemplo.
pixel 67

5

Me chame de manequim se não funcionar para você

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

4

Se você não quiser alterar a extensão do arquivo, pode exportar uma função que retorna jsx e, em seguida, importar e chamar essa função em seu arquivo js.

// greeter.jsx

import React from 'react';

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

e depois

// index.js

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

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

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

Eu não entendo o downvote. Alguém pode me explicar para que eu seja um contribuidor melhor?
M Falanga,

7
talvez seja porque, embora essa correção "funcione", é, na melhor das hipóteses, uma solução alternativa. E incluir uma solução alternativa em vários arquivos JS em todo o seu projeto parece meio maluco e pouco profissional.
mkvlrn

Concordo que esta técnica não é idiomática React. No entanto, só encontrei esse problema com meu ponto de entrada. Eu não recomendaria fazer isso em todos os arquivos, pois criaria um código estranho. Se esse for o seu caso de uso, apenas modifique as regras do linter conforme sugerido na resposta aceita.
M Falanga

2

Para expor a resposta de Martin , parece que não é possível, atualmente, usar JSXno React Native. Um PR foi criado, mas revertido devido a preocupações com a fragmentação e consequências desconhecidas de ter coisas semelhantes index.ios.jsx. Não tenho certeza de como o AirBnb funciona em torno disso ou se funciona, mas usei basicamente o mesmo rulesbloco que Martin.


2

Seguinte documentação do React :

Cada elemento JSX é apenas um açúcar sintático para chamar React.createElement (componente, props, ... filhos).

Seguindo o guia de estilo do Airbnb :

Não use React.createElement a menos que esteja inicializando o aplicativo a partir de um arquivo que não seja JSX .

Você poderia fazer isso:

    //index.js
    const app = React.createElement(App);
    ReactDOM.render(app, document.getElementById('root'));
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.