import/no-named-as-default

[AdrienLemaire]

Related: #225
Follow-up from: #563

What version of TypeScript are you using?
3.1.6

What version of typescript-eslint-parser are you using?
21.0.1

What code were you trying to parse?

SignUpForm.tsx

import InputYourEmail from "./InputYourEmail";

InputYourEmail.js

export default class InputYourEmail extends Component {}

.eslintrc

extends:
  - eslint-config-with-prettier
  - plugin:redux-saga/recommended
  - plugin:security/recommended

settings:
  react:
    version: 16.6.0
  import/resolver:
    babel-plugin-root-import: {}
    typescript: {} # use tsconfig.json


parser: babel-eslint

plugins:
  - immutable
  - import
  - material-ui
  - redux-saga
  - security
  - typescript

parserOptions:
  ecmaVersion: 2018
  sourceType: "module"
  allowImportExportEverywhere: false
  codeFrame: false
  ecmaFeatures:
    legacyDecorators: true
    jsx: true

globals:
  firebase: true
  requirejs: true
  window: true
  _: true
  expect: true
  jest: true
  # enzyme vars (check jestsetup.js)
  shallow: true
  render: true
  mount: true

env:
  amd: true # for require.js (request() and define())
  browser: true
  commonjs: true
  es6: true
  mocha: true

rules:
  class-methods-use-this: 1
  flowtype/no-types-missing-file-annotation: 0
  immutable/no-mutation: 2
  import/named: 1
  import/order: error
  import/no-extraneous-dependencies: 0
  import/no-unresolved: error
  jsx-a11y/anchor-is-valid:
  - error
  - components:
    - Link
    specialLink:
    - to
  no-restricted-syntax:
    - error
    - selector: 'ForInStatement'
      message: 'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.'
    - selector: 'LabeledStatement'
      message: 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.'
    - selector: 'WithStatement'
      message: '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.'
  no-else-return:
    - "error"
    - allowElseIf: true
  one-var:
    - error
    - var: "always"
  prefer-destructuring:
    - error
    - object: false
  react/jsx-filename-extension: 0
  react/forbid-foreign-prop-types: 1
  react/prop-types: [2, {skipUndeclared: 1}]
  strict: 0
  typescript/class-name-casing: "error"
  typescript/no-unused-vars: "error"
  typescript/type-annotation-spacing: "error"

overrides:
  - files: ["*.ts", "*.tsx"]
    parser: "typescript-eslint-parser"
    parserOptions:
      ecmaVersion: 2018
      sourceType: "module"
      allowImportExportEverywhere: false
      codeFrame: false
      ecmaFeatures:
        legacyDecorators: true
        jsx: true
        useJSXTextNode: true

# vi: ft=yaml

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "allowJs": true,
    "checkJs": false,
    "jsx": "react",
    "sourceMap": true,
    "rootDir": "src",
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "removeComments": true,
    "outDir": "build",
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    },
    "noEmit": true,
    "pretty": true,
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "dist_*",
    "scripts",
    "webpack",
    "jest",
    "coverage",
    "config"
  ],
  "include": [
    "./src/*",
    "./src/**/*"
  ]
}

What did you expect to happen?
No error

What happened?

  14:28  error  Parse errors in imported module './InputYourEmail': '>' expected. (29:11)  import/no-named-as-default
  14:28  error  Parse errors in imported module './InputYourEmail': '>' expected. (29:11)  import/no-named-as-default-member

This is the only error I'm getting on 16 files out of 27 tsx files. #563 is also resolved by using typescript-eslint-parser.

The only relationship between the 16 files I could find was that they all import classes from js files.

[mysticatea]

Thank you for the report.

Does eslint-plugin-import give this parser the filename to parse the imported file?
This parser needs it because TypeScript switches parsing mode by the file extension.

[AdrienLemaire]

@mysticatea I think it does, but I haven't digged into their code.
I set the import/parsers as defined in the doc: https://github.com/benmosher/eslint-plugin-import#importparsers

[mysticatea]

Thank you for the pointing. But that option doesn't seem related in this. My question isn't the way that the plugin distinguishes the proper parser by file extensions. Does the plugin give this parser the filename to parse the imported file?

[mysticatea]

The plugin looks like giving: https://github.com/benmosher/eslint-plugin-import/blob/798eed7e559adab2eac07bf1b3e3518d4b7a4296/utils/parse.js#L31

Hmm.

[mysticatea]

Would you provide repo to reproduce it?
I couldn't reproduce it.

[mysticatea]

Or... please try to rewrite the overrides part in your .eslintrc because you have a ton of invalid parser options.

overrides:
  - files: ["*.ts", "*.tsx"]
    parser: "typescript-eslint-parser"
    parserOptions:
      jsx: true

[AdrienLemaire]

@mysticatea 😮 replacing my overrides with your snippet seems to have solved the issue. I don't remember where did I found the other options and how could I miss that they were invalid, but ... thank you very much!