[SOLVED] Upgrading @vue/eslint-config-prettier 7.0.0 causes compile error - Error: Failed to load config "@vue/prettier/@typescript-eslint" to extend from

Fought through a bunch of NPM dependency errors, (see below) getting a compile time error, that had very few hits when I google the error message. I'm hoping someone can give me some context on the error. Now I'm getting this error at compile time:

ERROR Error: Failed to load config "@vue/prettier/@typescript-eslint" to extend from. Referenced from: D:\TFS\StudentPortal4Vue_1_1\clientapp.eslintrc.js

the only meaningful google result I can find for that error is from a blog site, and it says to roll back to 6, because 7 is "too new" which is what was giving me the dependencies issues I started with, which made sense, but wasn't any help to me..

I found this SO post, but it says to install @vue/eslint-config-prettier, which I already did.

Syntax Error: Error: Failed to load config "@vue/prettier" to extend from

Can anyone tell me what the error message means?

I get that I'm supposed to have a config file somewhere which it can't find. But what config file where does it go and what does it look like? Any links describing the config file would be appreciated.

I get this isn't the best question ever, but I dont' know enough about what's going on to frame the question any better. I"ll re-edit it after I learn enough to make it more genericly useful.

I think these are the relevant files for the issue.

Package.json

    {
  "name": "student-portal",
  "version": "1.1.0",
  "private": true,
  "description": "Job Corps Student Portal",
  "scripts": {
    "build": "vue-cli-service build",
    "builddevboxiis": "vue-cli-service build --mode devboxiis",
    "builddevserver": "vue-cli-service build --mode devserver",
    "buildoctodeploy": "vue-cli-service build --mode octodeploy",
    "buildqa": "vue-cli-service build --mode qa",
    "lint": "vue-cli-service lint --fix",
    "serve": "vue-cli-service lint --fix && vue-cli-service serve --open"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "dependencies": {
    "@18f/us-federal-holidays": "^2.1.1",
    "@mdi/font": "^6.5.95",
    "@okta/okta-auth-js": "^4.1.2",
    "@okta/okta-vue": "^3.1.0",
    "@types/okta__okta-vue": "^1.2.0",
    "@vue/composition-api": "^0.6.7",
    "axios": "^0.25.0",
    "babel-loader": "^8.2.3",
    "caniuse-lite": "^1.0.30001407",
    "core-js": "^3.20.1",
    "dayjs": "^1.10.5",
    "exceljs": "^4.2.1",
    "file-saver": "^2.0.5",
    "typeface-source-sans-pro": "^1.1.13",
    "vue": "^2.6.12",
    "vue-gtag": "^1.16.1",
    "vue-router": "^3.5.3",
    "vuetify": "^2.6.9",
    "vuex": "^3.6.2",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.8.1",
    "@typescript-eslint/parser": "^5.8.1",
    "@vue/cli-plugin-babel": "^4.5.15",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-router": "^4.5.15",
    "@vue/cli-plugin-typescript": "^4.5.15",
    "@vue/cli-plugin-vuex": "^4.5.15",
    "@vue/cli-service": "^4.5.15",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "eslint": "^7.26.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.3.0",
    "lint-staged": "^10.5.4",
    "prettier": "^2.5.1",
    "sass": "1.32.13",
    "sass-loader": "^10.2.1",
    "typescript": "^4.5.5",
    "vue-cli-plugin-vuetify": "^2.4.5",
    "vue-template-compiler": "^2.6.12",
    "vuetify-loader": "^1.7.2"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}

.eslintrc.js

    module.exports = {
  root: true,

  env: {
    node: true,
  },

  // https://vuejs.github.io/eslint-plugin-vue/user-guide/#usage
  extends: [
    'eslint:recommended',
    '@vue/typescript/recommended',
    'plugin:vue/recommended',
    'plugin:prettier/recommended',
    '@vue/prettier/@typescript-eslint',
    '@vue/prettier',
  ],

  parserOptions: {
    ecmaVersion: 2020,
    ecmaFeatures: {
      jsx: true,
    },
  },

  rules: {
    'vue/valid-v-slot': ['error', { allowModifiers: true }],
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: false,
        endOfLine: 'crlf',
        tabWidth: 2,
        useTabs: false,
        quoteProps: 'as-needed',
        trailingComma: 'es5',
      },
    ],
    'linebreak-style': ['warn', 'windows'],
    'comma-dangle': ['warn', 'only-multiline'],
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'no-console': 'warn',
    'no-debugger': 'warn',
    'vue/no-unused-vars': 'off',
    'no-useless-rename': 'error',
    'one-var': ['warn', 'consecutive'],
    'no-var': 'error',
    'prefer-const': ['error', { destructuring: 'all' }],
    'multiline-comment-style': ['error', 'separate-lines'],
    'prefer-template': 'warn',
    'no-useless-concat': 'warn',
    'sort-imports': [
      'error',
      {
        ignoreCase: false,
        ignoreDeclarationSort: true,
        ignoreMemberSort: false,
        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
        allowSeparatedGroups: true,
      },
    ],
  },

  overrides: [
    {
      // Enable rule for TypeScript files
      files: ['*.ts', '*.tsx'],
      rules: {
        '@typescript-eslint/explicit-module-boundary-types': ['error'],
      },
    },
  ],
}

Context o f what i was doing

I pulled down the latest on one of our projects, and am getting a bunch of dependency errors when trying to do basic NPM Stuff. (like npm install) (same code works on other boxes, so I'm pretty sure it's my NPM install)

I look at the package.json and there was only one new dependency which I installed.

I read that an update of npm added legacy deps checking, so I started trying to fix those, by uninstalling and installing newer versions of the affected packages which were not finding dependencies and causing errors.

FYI: I'm an utter NPM noob, so this question is probably pretty basic, apologies for that.

I am trying to work my way through them, I think have all the dependencies issues fixed, I can now run npm install and it succeeds.

last one was

npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-prettier@"^3.1.0" from @vue/eslint-config-prettier@6.0.0
npm ERR! node_modules/@vue/eslint-config-prettier
npm ERR!   dev @vue/eslint-config-prettier@"^6.0.0" from the root project
npm ERR!

I upgraded to "@vue/eslint-config-prettier": "^7.0.0", because 6 had the old bad dependency, and 7 is the next release.

This resulted in an error I googled and had to do this, installling two needed packages..

npm install @vue/eslint-config-prettier @vue/eslint-config-typescript -D

This solved all my dependency errors and i was able to try to compile.

Those prettier related upgrades appear to be the source of my new compile time error. I included all the above just in case it's relevant to the error below which has me stumped.