ESLint couldn't find the config "@vue/prettier/@typescript-eslint" after upgrading from 6.0.0 to 7.0.0

[some-user123]

I recently upgraded @vue/eslint-config-prettier from 6.0.0 to 7.0.0.

Now eslint complains:

Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the config "@vue/prettier/@typescript-eslint" to extend from. Please check that the name of the config is correct.

The config "@vue/prettier/@typescript-eslint" was referenced from the config file in ".../.eslintrc.js".

Can't get my head around this.

Changelog says "simplified the usage". What does this mean? How should I updated my .eslintrc.js?

[rtack]

Same issue on our projects.
Reading some of the readmes and linked projects, I'm wondering if the name for the extends has changed and the config needs to be updated from

extends: [
// other extends
'@vue/prettier/@typescript-eslint',
]

to:

extends: [
// other extends
'@vue/eslint-config-typescript/recommended',
]

[josephlbarnett]

I've changed it to "@vue/eslint-config-prettier" in my project and it appears to work

[jojomatik]

To get version 7.0.0 working, I had to do the following:

• Upgrade eslint to 7.28.0+ (in my case 7.32.0; source: 76ff5bc)
• Install @rushstack/eslint-patch (1.1.0; source: https://github.com/vuejs/eslint-config-prettier#installation ["recommend"?] )
• Add require("@rushstack/eslint-patch/modern-module-resolution"); to the top of .eslintrc.js (source: https://github.com/vuejs/eslint-config-prettier#installation)
• Change the extends section from (source: the comments in this issue)

  extends: [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier",
      "@vue/prettier/@typescript-eslint",
    ],
  

  to

    extends: [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript/recommended",
      "@vue/prettier",
      "@vue/eslint-config-typescript",
      "@vue/eslint-config-prettier",
    ],
  

See also: jojomatik/blockcluster@134e9a5...7cc0f60

Working example: jojomatik/blockcluster@3009786
Related workflow: https://github.com/jojomatik/blockcluster/runs/4732458806?check_suite_focus=true

I had to collect this information based on trial and error, browsing through the commits etc. I'm therefore not fully confident that it's entirely correct and don't know for sure that it contains the same rules as before. But I didn't notice any immediate problems.

It might be useful to add this to the changelog, release note and maybe the README file.

Is @rushstack/eslint-patch strictly required? I needed it as otherwise an error message was thrown (prettier could not be resolved anymore). The README and release notes make it look, as if it were optional?

[mat813]

Ok, so, based on this, and being lazy, the only thing I did was replace:

    "@vue/prettier/@typescript-eslint",

with

    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier",

And everything seems to work just fine.

[vincerubinetti]

I have an odd issue.

If I keep this package as 6.0.0, I get a no-undef eslint error 'SubmitEvent' is not defined. If I upgrade this package to 7.0.0, that error goes away, but then I get the error Failed to load config "@vue/prettier/@typescript-eslint" to extend from. Referenced from: .eslintrc.js. If I then try any of the solutions above, this error goes away, but the "SubmitEvent" error comes back.

Anyone have any idea what could be going on here? I'm confused. Why would this package affect typescript.

The SubmitEvent interface was added to typescript in 4.4: microsoft/TypeScript-DOM-lib-generator#1029 (comment) I'm assuming somewhere in the package chain here, something's using an older version of typescript. Maybe it has something to do with vuejs/eslint-config-typescript using version 4.0 of typescript as a dev dependency?

package.json

{
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/vue-fontawesome": "^3.0.0-5",
    "@vueuse/core": "^8.7.3",
    "body-scroll-lock": "^4.0.0-beta.0",
    "core-js": "^3.23.1",
    "file-saver": "^2.0.5",
    "lodash": "^4.17.21",
    "micromark": "^3.0.10",
    "normalize.css": "^8.0.1",
    "tippy.js": "^6.3.7",
    "ua-parser-js": "^1.0.2",
    "vue": "^3.2.37",
    "vue-inline-svg": "^3.1.0",
    "vue-router": "^4.0.16",
    "vue-tippy": "^6.0.0-alpha.52",
    "vuex": "^4.0.2",
    "wicg-inert": "^3.1.2"
  },
  "devDependencies": {
    "@types/body-scroll-lock": "^3.1.0",
    "@types/jest": "^28.1.2",
    "@types/jest-axe": "^3.5.4",
    "@types/lodash": "^4.14.182",
    "@types/node-fetch": "^2.6.2",
    "@types/ua-parser-js": "^0.7.36",
    "@typescript-eslint/eslint-plugin": "^5.28.0",
    "@typescript-eslint/parser": "^5.28.0",
    "@vue/cli-plugin-babel": "~5.0.6",
    "@vue/cli-plugin-e2e-cypress": "^5.0.6",
    "@vue/cli-plugin-eslint": "~5.0.6",
    "@vue/cli-plugin-router": "~5.0.6",
    "@vue/cli-plugin-typescript": "~5.0.6",
    "@vue/cli-plugin-unit-jest": "~5.0.6",
    "@vue/cli-plugin-vuex": "~5.0.6",
    "@vue/cli-service": "~5.0.6",
    "@vue/compiler-sfc": "^3.2.37",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/test-utils": "^2.0.0",
    "@vue/vue3-jest": "27",
    "cypress": "^10.1.0",
    "eslint": "^8.18.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^9.1.1",
    "eslint-plugin-vuejs-accessibility": "^1.2.0",
    "jest-axe": "^6.0.0",
    "msw": "^0.42.1",
    "node-fetch": "^2.6.0",
    "prettier": "^2.7.1",
    "prettier-plugin-jsdoc": "^0.3.38",
    "sass": "^1.52.3",
    "sass-loader": "^13.0.0",
    "ts-jest": "^27.0.0",
    "typescript": "^4.7.4"
  },
  "msw": {
    "workerDirectory": "public"
  }
}

[LuWa-at-work]

Ok, so, based on this, and being lazy, the only thing I did was replace:

    "@vue/prettier/@typescript-eslint",

with

    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier",

And everything seems to work just fine.

This works perfectly fine for me. Thx a lot 👍