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

[bonnie]

The following is from eslint/eslint#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]

Hi!

I tried this out quickly and couldn’t reproduce. But you didn’t post your .eslintrc etc so it’s hard for me to know if I’m doing exactly the same thing as you. Edit: Oops, just saw that there was a collapsed “Configuration” part in your message, re-checking…

Can you create a minimal repo that causes the error that I can clone to easily reproduce your error? Preferably using eslint on the command line instead of via VSCode if possible.

[lydell]

Update: Now that I found your .eslintrc I wasted a bunch of time trying to figure out all the bazillion of ESLint plugin it depends on so I could finally run your config. Still no luck reproducing. import type {} from is a parse error, so rules don’t even run, as expected.

So, please create a minimal repo that reproduces the error. In general, it’s nice to do that when reporting issues. Don’t waste maintainers’ time trying to reproduce your issue – let them dive into the code and fix it for you as soon as possible. Thanks! 🙏

[bonnie]

Hi, Lydell --

I created https://github.com/bonnie/import-type-eslint-crash to demonstrate the issue. It is a project created with create-react-app, typescript template (I put some time into reproducing the issue without create-react-app but was unable to). I made the following changes to the create-react-app project:

• I added my own .eslintrc.json
• I added my own tsconfig.json
• I installed these packages:
  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser
  • eslint-plugin-simple-import-sort
• I added an incomplete import statement in App.tsx

You can trigger the ESLint crash by running eslint src/App.tsx

I understand that this should not pass linting as it is an incomplete statement; however it should not crash ESLint.

[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.

[lydell]

Alright, I did some digging. Turns out create-react-app had nothing to do at all with it – after some poking around it was rather easy to extract only the ESLint parts. Next time, I’m sure you’d make it too with some more effort!

The problem is that @typescript-eslint/parser does not throw errors on some syntax errors, such as import function App() {}. Instead it gives an AST with unexpected shape to its rules, which can cause them to crash. This issue is logged here: typescript-eslint/typescript-eslint#1852

So follow that issue and pray it’ll be fixed!

[bonnie]

Got it, Thanks Simon!