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

Created on 3 Nov 2017 · 7Comments · Source: airbnb/javascript

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

question

Source

wsfuller

👍1

Most helpful comment

@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.

wsfuller on 4 Nov 2017

👍10

All 7 comments

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.

ljharb on 4 Nov 2017

👍10 👎1

@ljharb I'm failing to understand where extensions are supposed to be used. Could you link to some example configs on how this is supposed to be done properly?

wsfuller on 4 Nov 2017

👍1

@wsfuller the only time you should use extensions in require/import paths is if you're importing JSON files, or if you've made any nonstandard changes to allow requires of alternate extensions, like .css or .svg or .jpg. With .js, .jsx, or .mjs files, you should always omit the extension.

ljharb on 4 Nov 2017

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.

wsfuller on 4 Nov 2017

👍10

Definitely you might have to teach webpack to pick up jsx files (and soon, mjs files).

ljharb on 4 Nov 2017

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.

@ljharb But this is not documented in the actual style guide. Is that a bug?