Eslint-plugin-import: jsx import/extensions?

[tony-kerz]

i'm getting flagged by no-unresolved for things like this:

import Foo from './my-jsx-foo'

where my-jsx-foo has a jsx extension, the issue goes away if i do this:

import Foo from './my-jsx-foo.jsx'

in reading this documentation on settings, it says i should be able to either call out:

"settings" : {
  "import/extensions": ["js", "jsx"]
}

or use the react shared config.

the settings thing didn't work for me, anyone familiar with how to enable the react shared config?

[ljharb]

Do you have any other files, or a directory, named my-jsx-foo in that directory, with or without extensions?

[dotcom900825]

We are also seeing this issue recently, we have a React-native repo and we are importing our JSX component like this: import DocumentModel from './models/Document', now we are seeing Missing file extension for "./models/Document" import/extensions, and there is only one Document.js file within that folder.

[tony-kerz]

hi @ljharb, thanks for asking, no other files with that same name that could explain the behavior...

[dotcom900825]

@tony-kerz Which version do you have for eslint-plugin-import, we just upgraded to the latest 2.3.0, and now the issue is gone.

[tony-kerz]

@dotcom900825 that's good news. i'm actually getting eslint-plugin-import transitively via XO, but it is at 2.3.0 and i'm still seeing the issue, but thanks for the 411 👍

[dotcom900825]

@tony-kerz Unfortunately I think the issue is still occurring on our end, we didn't see that in our latest PR because it doesn't contain any changes in term of component importing. We are using Hound CI to run ESLint with our Github repo, it might be the issue on their end which I am not 100% sure.

[benmosher]

"import/extensions": ["js", "jsx"] => "import/extensions": [".js", ".jsx"]

the dots need to be in the settings, AFAICT from docs/tests

[mattdell]

👆🏻 doesn't work for me even with the dots

[ykensuke]

+1

[jbandi]

I finally figured out a configuration that is working for me:

 "eslintConfig": {
    "parser": "babel-eslint",
    "plugins": [
      "react",
      "import"
    ],
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": true,
      "es6": true,
      "jasmine": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:import/react",
      "plugin:import/recommended"
    ],
    "settings": {
      "import/resolver": {
        "node": {
          "extensions": [
            ".js",
            ".jsx"
          ]
        }
      }
    },
...
}

(I am using "eslint-plugin-import": "2.7.0")

It's good enough for me. Probably it would be better to use the webpack import resolver ... but I did not manage to get that working.
I think the documentation about the "import/resolver" could be improved ... if its really needed, maybe there is a better was?

[abdulwahid-360training]

For me following configuration is working

"settings": {
.....
    "import/resolver": {
      "babel-module": {
        "extensions": [".js", ".jsx"]
      }
    }
  }

[IAmMarcellus]

For anyone still trying to do this with the webpack resolver, adding this to my config got it working for me:

  "settings": {
    "import/resolver": {
      "webpack": {
        "config": {
          "resolve": {
            "extensions": [
              ".js",
              ".jsx"
            ]
          }
        }
      }
    }
  },