Eslint-plugin-import: 'Missing file extension for "react"' error with webpack externals

[amkoehler]

Hello,

We are using this plugin with webpack and have the settings defined like this in our .eslintrc:

{
  "settings": {
    "import/resolver": "webpack"
  }
}

This hasn't been an issue until we started defining externals in webpack. I added the following to our webpack configuration based on webpack's docs for defining externals:

  externals: {
    react: 'react',
  },

and suddenly eslint is failing with this error

error  Missing file extension for "react-dates"  import/extensions`

I found some issues submitted by other users involving webpack externals but they were for slightly different problems. Any ideas on how to resolve this?

[ljharb]

What version of the webpack resolver are you using? This might have been fixed already; and if not, I think it will be fixed in the next version of the plugin.

[amkoehler]

I checked and we were on 0.8.3. After upgrading to 0.8.4 I'm seeing the same issue. Thanks for the quick response. We'll keep an eye out for a new version.

I should have mentioned we're using airbnb's ruleset for import/extensions. I'm able to get around this problem by overriding their rule with "import/extensions": 0 in .eslintrc.

[ljharb]

Let's keep this open just in case it's not resolved :-)

[dave-irvine]

Yeah I've just stumbled into this problem as well.

I don't see any recent commits in the webpack resolver (you mean the one in this repo, right?) since 0.8.4 which is what I'm using.

Is this just a waiting game for the next publish or does someone need to write a fix?

Also, webpack resolver externals don't seem to work with import/no-extraneous-dependencies. I've got "react" specified as an external but get a complaint that I need to install it.

[ljharb]

Marking it as an external doesn't mean you don't have to have it in package.json, and have it installed. Also, if npm ls fails, nothing can be expected to work.

[devboell]

I've been struggling with this as well.
I've made this minimal repo to experiment with:
https://github.com/devboell/react-lint-err
(It uses the latest versions of all the packages)

I've tried many different configurations, I'll list a few.

This results in the linting error.

  ...

  "extends": ["airbnb"],
  "plugins": ["react", "import"],
  "rules": {
    "semi": ["error", "never"],
    "import/no-unresolved": 2,
    "react/jsx-uses-react": 2,
    "react/jsx-filename-extension": 0
  },
  "settings": {
    "import/resolver": "webpack"
  }

Removing externals from webpack-config.js, or adding the rule "import/extensions": 0 makes the error go away, as @amkoehler describes.

Removing "extends": ["airbnb"], also makes the error go away.

What I find strange is that if I add the import/extensions rule as defined by airbnb here, there is no error either. So this works:

  ...

  "extends": ["airbnb"],
  "plugins": ["react", "import"],
  "rules": {
    "semi": ["error", "never"],
    "import/no-unresolved": 2,
    "import/extensions": ["error", "ignorePackages", {
      "js": "never",
      "mjs": "never",
      "jsx": "never"
    }],
    "react/jsx-uses-react": 2,
    "react/jsx-filename-extension": 0
  },
  "settings": {
    "import/resolver": "webpack"
  }  

It seems that airbnb defines the rule correctly, but somehow it is not applied? (or at least not when externals is present in webpack.config.js?)

[ljharb]

The airbnb config also applies global settings that the import plugin listens to; separately, the line you linked to is master, not yet released - the last released line is here

[devboell]

ah yes, of course, thanks. I'll wait for the next release.