Unexpected use of file extension "jsx" for "./components/App.jsx" (import/extensions)

Unable to use .jsx extension using the airbnb ESLint config

index.jsx

import React from 'react';
import App from './components/App.jsx'; <<<<<<<<< Unexpected use of file extension "jsx"...

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

.eslintrc

{
  "extends": "airbnb",
  "env":{
    "browser": true
  },
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
  }
}

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”,

Unsuccessful Implementations/Examples

• ESLint Import Issues
• SO Issue
• JSX File Name Extension

[ljharb]

You’re not supposed to use the extension there. The best practice for file extensions on imported code is to omit them, which is why our config requires that as well.

[wsfuller]

@ljharb Sorry the previous question didn’t correctly state my issue. The omitting of file extensions in import statements is fine, the actual problem I was having was resolving .jsx with Webpack without setting up a resolve object in my webpack.config.

In reading the documentation I was trying to find something like:

"In creating imports omit your file extensions. In the case you are using Webpack you can resolve paths using Webpack Resolve in your webpack.config

Ex.

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

In doing that, the issue was resolved. I’m hoping that is the correct way to get things setup properly. Just having something to point me in the right direction would’ve been really helpful.