Eslint-plugin-import: import/named requires 'typescript-eslint-parser'

[lednhatkhanh]

This is my .eslintrc config:

{
  "parser": "@typescript-eslint/parser",
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  },
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "plugins": ["react-hooks", "emotion"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "emotion/jsx-import": 0,
    "react/react-in-jsx-scope": 0,
    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
    "import/prefer-default-export": 0
  }
}

I'm importing like this:

import { Button } from "../src/components/button";

The error:

Parse errors in imported module '../src/components/button': Cannot find module 'typescript-eslint-parser' (undefined:undefined)eslint(import/named)

[ljharb]

so for one, i think the parser needs to be @typescript/eslint-parser, doesn't it?

[lednhatkhanh]

@ljharb Yeah, @typescript-eslint/parser is the new one that replaces typescript-eslint-parser.

[ljharb]

hmm, the implication is that one of your plugins or shared configs is still pointing to the old typescript parser.

[lednhatkhanh]

So I updated my config to this:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:import/errors",
    "plugin:import/typescript"
  ],
  "plugins": ["import"]
}

And the problem is still there.

[lednhatkhanh]

So I saw this pr #1283 and it fixes the problem, but requires me to install typescript-eslint-parser and eslint-import-resolver-typescript.

[billyjanitsch]

This was already fixed in bdc05aa1d029b70125ae415e5ca5dca22250858b. (Note the change to config/typescript.js.) eslint-plugin-import just needs a new release.

[kachkaev]

@benmosher it'd be awesome if you could cut a new release! 🙏 Can't wait to use eslint-plugin-import with @typescript-eslint! 🤩

[MatiasOlivera]

Until there is a new release, a workaround that works for me is:

// .eslintrc.js

var jsExtensions = ['.js', '.jsx'];
var tsExtensions = ['.ts', '.tsx'];
var allExtensions = jsExtensions.concat(tsExtensions);

module.exports = {
  plugins: ['import'],
  settings: {
    'import/extensions': allExtensions,
    'import/parsers': {
      '@typescript-eslint/parser': tsExtensions
    },
    'import/resolver': {
      'node': {
        'extensions': allExtensions
      }
    }
  }

}

It's necessary not to extend the configuration from "plugin:import/typescript".

@lednhatkhanh There is no need to install typescript-eslint-parser and eslint-import-resolver-typescript

[gabrielizaias]

For anyone finding this ticket, this has not been released yet. @MatiasOlivera solution still works.

@ljharb Is there a big picture here that we are missing? If so, would it make sense to keep this ticket open until a new release is cut? At the moment the closed status feels a bit misleading. Thanks!

cc @benmosher

[ljharb]

@gabrielizaias no, issues (not tickets) are pretty universally closed when fixes are merged, not when they’re released (an unrelated action)

[kachkaev]

Can't wait for a release with this fix to migrate more projects from tslint to eslint 🙌 🙏 @MatiasOlivera, thanks for the workaround!

[nikolalukovic]

Any update on when is this going to get released?