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

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?

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"] }],
}

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']},

Llámame tonto si no te funciona

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

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);

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.

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'));