Broken import/no-named-as-default rule

Error

TopPage/index.js                                                                               
  6:8  error  Using exported name 'Section1' as identifier for default export  import/no-named-as-default                                                                             

✖ 1 problem (1 error, 0 warnings)

TopPage/index.js

import Section1 from "./Section1";

TopPage/Section1.tsx

import React, {FC, Fragment, memo} from "react";

export const Section1Naked: FC = () => (
  <Fragment>
    …
  </Fragment>
);

const MemoSection1 = memo(Section1Naked);
/* eslint-disable-next-line immutable/no-mutation */
MemoSection1.displayName = "memo(Section1)";
export default MemoSection1;

One of React's conventions is to use a file per component and use the same name. I export the name Section1Naked and a default from the file Section1.tsx, then try to import the default as Section1. Since no name Section1 has been exported, no error should be raised.

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
  import/parsers:
    typescript-eslint-parser: [ .ts, .tsx ]


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: 2
  flowtype/no-types-missing-file-annotation: 0
  immutable/no-mutation: 2
  import/named: 2
  import/order: error
  # TODO: https://github.com/entwicklerstube/babel-plugin-root-import/issues/119
  #- error
  #- newlines-between: always
  #  groups:
  #    - builtin
  #    - external
  #    - [internal, parent]
  #    - [sibling, index]
  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
  no-unused-vars: "error"
  one-var:
    - error
    - var: "always"
  prefer-destructuring:
    - error
    - object: false
  react/jsx-filename-extension: 0
  react/forbid-foreign-prop-types: 2
  # We'll delete proptypes after finishing typescript integration
  react/prop-types: [2, {skipUndeclared: 1}]
  react/sort-prop-types: "error"
  sort-imports: 0  # https://github.com/eslint/eslint/issues/11019
  sort-keys: 0
  sort-vars: 2
  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:
        jsx: true

# vi: ft=yaml

Versions used:

• eslint 5.9.0
• eslint-plugin-import 2.14.0