JSX no está permitido en archivos con extensión '.js' con eslint-config-airbnb

102

He instalado eslint-config-airbnb que se supone que preconfigura ESLINT para React:

Nuestra exportación predeterminada contiene todas nuestras reglas de ESLint, incluidas ECMAScript 6+ y React. Requiere eslint, eslint-plugin-import, eslint-plugin-react y eslint-plugin-jsx-a11y.

Mi .eslintrcampliando su configuración:

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

Desafortunadamente, recibo el siguiente error al insertar un archivo .js con el código React JSX en su interior:

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

¿No se configuró eslint-config-airbnb para reaccionar para admitir JSX, como se indicó?

¿Qué se debe hacer para eliminar ese error?

javascript reactjs eslint eslint-config-airbnb Mendes
fuente

Respuestas:

224

Cambie las extensiones de archivo a las .jsxmencionadas o desactive la regla jsx-filename-extension . Puede agregar lo siguiente a su configuración para permitir .jsextensiones para JSX.

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}
Martin Mihaylov
fuente
1
Si no desea cambiar la extensión del nombre de archivo o deshabilitar la regla, consulte esta respuesta
M Falanga
Esta respuesta aceptada no deshabilita la regla. Simplemente permite que los archivos .js contengan JSX y lo que ha vinculado parece crear demasiado caos en proyectos a gran escala.
JanithaR
El segundo elemento "jsx" de la matriz no es necesario. El elemento "js" es suficiente ya que la regla ya hace referencia al alcance "jsx".
Raymond Wachaga
17

Es un trabajo para mi. espero poder ayudarte.

  1. deshabilitar jsx-filename-extension en .eslintrc :

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

  2. en webpack.config.js :

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

Willard Wong
fuente
2
le dio el voto para agregar el webpack.config.jsejemplo.
pixel 67
5

Llámame tonto si no te funciona

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

Si no desea cambiar la extensión de su archivo, puede exportar una función que devuelva jsx, y luego importar y llamar a esa función en su archivo js.

// greeter.jsx

import React from 'react';

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

y entonces

// 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
fuente
No entiendo el voto negativo. ¿Alguien puede explicarme para que yo pueda ser un mejor colaborador?
M Falanga
7
tal vez sea porque, si bien esta solución "funciona", es, en el mejor de los casos, una solución alternativa. E incluir una solución alternativa en varios archivos JS a lo largo de su proyecto parece un poco hack y poco profesional.
mkvlrn
Estoy de acuerdo en que esta técnica no es React idiomática. Sin embargo, solo me he encontrado con este problema con mi punto de entrada. No recomendaría hacer esto en todos los archivos, ya que crearía un código incómodo. Si ese es su caso de uso, simplemente modifique las reglas de linter como se sugiere en la respuesta aceptada.
M Falanga
2

Para exponer la respuesta de Martin , parece que no es posible, actualmente, usar JSXen React Native. Se creó un RP, pero se revirtió debido a preocupaciones sobre la fragmentación y las consecuencias desconocidas de tener cosas como index.ios.jsx. No estoy seguro de cómo funciona AirBnb en torno a esto o si lo hacen, pero he usado básicamente el mismo rulesbloque que Martin.

Adam burdette
fuente
2

Siguiendo la documentación de React :

Cada elemento JSX es simplemente azúcar sintáctico para llamar a React.createElement (componente, accesorios, ... hijos).

Siguiendo la guía de estilo de Airbnb :

No use React.createElement a menos que esté inicializando la aplicación desde un archivo que no sea JSX .

Podrías hacer esto:

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