React ESLint Config "Unexpected file extension JSX"

Question

Running Airbnb's Eslint Config and running into an issue using the .jsx extension.

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App.jsx'; <<<<<<<<< Unexpected use of file extension "jsx"...

require('./index.scss');

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
document.getElementById('root'),
);

So looked this up and found another SO which is in conjunction with Restrict file extensions that may contain JSX

Ok, so updated my .eslintrc to reflect this in my rules

.eslintrc

{
  "extends": "airbnb",
  "env":{
    "browser": true
  },
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
    "no-tabs": 0,
    "react/prop-types": 0,
    "react/jsx-indent": [2, "tab"],
    "react/jsx-indent-props": [2, "tab"]
  }
}

However still getting the same error. Is there something else that I'm missing?

Dependencies

• "eslint": "^4.10.0",
• "eslint-config-airbnb": "^16.1.0",
• "eslint-plugin-import": "^2.8.0",
• "eslint-plugin-jsx-a11y": "^6.0.2",
• "eslint-plugin-react": "^7.4.0",

Solution 1

Removed extension on import statement:

import App from './components/App';

Which lead to unable to resolve error. That then brought me to another SO: Webpack Can't find module if file named jsx and writing a resolve object in my webpack.config

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

So far this is working as expected, trying to find confirmation that this is the "best practice"

Update to .eslintrc

As pointed out by an answer below, removed "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

{
  "extends": "airbnb",
  "env":{
    "browser": true,
  },
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "no-tabs": 0,
  }
}

Solution 2

I am pretty sure you're blaming the wrong rule. You're actually hitting this one from eslint-plugin-import: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md

Here's the line in the code with the error you get: https://github.com/benmosher/eslint-plugin-import/blob/master/src/rules/extensions.js#L152

message: `Unexpected use of file extension "${extension}" for "${importPath}"`,

The rule is a good one, why would you want to type the extensions in all the time?

Regarding adding '.jsx' to resolve extensions, definitely the way to go if you're going to write JSX.

P.S. The jsx-filename-extension configuration you copied let's you keep JSX in files with either '.jsx' or '.js' extensions, which I would avoid. Better keep JSX in .jsx files.

Comments

[wsfuller]

I didn't want to write the extensions which is in accordance to the Airbnb styles which states to omit them. That's fine, but the problem was, if I omit the extension then the path won't resolve. That then lead to how to fix the resolve path error. Which turns out you can configure Webpack with a resolve object to handle .jsx. In the documentation for Airbnb I couldn't find "omit the extension and in doing so you will also need to do this other step to resolve your files...using Webpack follow this link". Just felt like incomplete docs imo.