`TypeError: Cannot read property 'replace' of undefined` when using `import type`

The following is from https://github.com/eslint/eslint/issues/14554 which I filed with ESLint; I was advised to file with this project as the error is in eslint-plugin-simple-import-sort.

Tell us about your environment

Node version: v15.13.0 npm version: v7.9.0 Local ESLint version: v7.25.0 Global ESLint version: v7.23.0 (Currently used) Operating System: darwin 18.6.0

What parser (default, @babel/eslint-parser, @typescript-eslint/parser, etc.) are you using?

@typescript-eslint/parser

Please show your full configuration:

Configuration

{
  "extends": [
    "airbnb",
    "plugin:testing-library/recommended",
    "plugin:testing-library/react",
    "plugin:@typescript-eslint/recommended",
    "react-app",
    "react-app/jest",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "paths": ["src"]
      }
    }
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": [
    "testing-library",
    "jest-dom",
    "sonarjs",
    "jsx-a11y",
    "@typescript-eslint",
    "simple-import-sort",
    "prettier"
  ],
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest": true
  },
  "rules": {
    "import/no-extraneous-dependencies": [2, { "devDependencies": true }],
    "testing-library/await-async-query": "error",
    "testing-library/no-await-sync-query": "error",
    "testing-library/no-debug": "warn",
    "jest-dom/prefer-checked": "error",
    "jest-dom/prefer-enabled-disabled": "error",
    "jest-dom/prefer-required": "error",
    "jest-dom/prefer-to-have-attribute": "error",
    "react/prop-types": ["off"],
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
    "import/extensions": ["error", "never"],
    "import/prefer-default-export": 0,
    "import/no-anonymous-default-export": 0,
    "import/no-unresolved": 2,
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "sort-imports": "off",
    "import/order": "off",
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": "error",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/no-array-index-key": "off",
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": "error",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-curly-newline": "off"
  }
}

I am running ESLint via the dbaeumer.vscode-eslint extension in VSCode, Version 2.1.20. These are the extension settings I’m using:

"eslint.alwaysShowStatus": false,
"eslint.codeAction.disableRuleComment": {
  "enable": true,
  "location": "separateLine"
},
"eslint.codeAction.showDocumentation": {
  "enable": true
},
"eslint.codeActionsOnSave.mode": "all",
"eslint.debug": false,
"eslint.format.enable": false,
"eslint.lintTask.enable": false,
"eslint.nodeEnv": null,
"eslint.nodePath": null,
"eslint.onIgnoredFiles": "off",
"eslint.options": {
  "configFile": ".eslintrc.json"
},
"eslint.packageManager": "npm",
"eslint.probe": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "html",
  "vue",
  "markdown"
],
"eslint.quiet": false,
"eslint.rules.customizations": [],
"eslint.run": "onType",
"eslint.runtime": null,
"eslint.trace.server": "off",
"eslint.validate": [
  "javascript",
  "typescript",
  "typescriptreact"
],
"eslint.workingDirectories": [
  "client"
],

My VSCode settings are:

{
  "workbench.colorTheme": "Abyss",
  "eslint.workingDirectories": ["client"],
  "eslint.options": {
    "configFile": ".eslintrc.json"
  },
  "eslint.validate": ["javascript", "typescript", "typescriptreact"],
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "eslint.codeAction.showDocumentation": {
  
    "enable": true
  }
}

Typing this code will reliably set off the error, usually twice:

import type {} from

What did you expect to happen? No error

What actually happened? Please copy-paste the actual, raw output from ESLint.

I can reliably reproduce the following error (usually two times) by typing import type {} from :

[Error - 5:30:15 PM] ESLint stack trace:
[Error - 5:30:15 PM] TypeError: Cannot read property 'replace' of undefined
Occurred while linting /Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/src/components/appointments/Calendar.tsx:2
    at getSource (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint-plugin-simple-import-sort/shared.js:805:8)
    at /Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint-plugin-simple-import-sort/shared.js:167:20
    at Array.map (<anonymous>)
    at Object.getImportExportItems (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint-plugin-simple-import-sort/shared.js:109:16)
    at maybeReportChunkSorting (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint-plugin-simple-import-sort/imports.js:67:24)
    at Program (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint-plugin-simple-import-sort/imports.js:58:11)
    at /Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/node-event-generator.js:256:26)

Steps to reproduce this issue:

1. Install eslint-plugin-simple-import-sort (I’m using version 6.0.1)
2. Install the dbaeumer.vscode-eslint extension (version 2.1.20) on VSCode (I’m using version Version: 1.55.2)
3. type import type {} from
4. the ESLint error ESLint: Cannot read property 'replace' of undefined will occur (usually two times)

Note: this seems to be new-ish behavior, though I can’t pinpoint exactly when it started.

[lydell]

Thanks! Now I can reproduce. And thanks for trying to reproduce without create-react-app, that’s really helpful to know. I’ll try to dig deeper into this when I get the chance.

[bonnie]

Got it, Thanks Simon!