[npm run dev执行报错] Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload-index').use(<Plugin>) first

[JimmyWangj]

npm run dev

my package.json
"dependencies": {
"axios": "0.18.1",
"core-js": "3.6.5",
"echarts": "^4.9.0",
"element-ui": "2.13.2",
"html2canvas": "^1.0.0-rc.7",
"jquery": "^3.6.0",
"less": "^3.12.2",
"less-loader": "^7.0.2",
"js-cookie": "2.2.0",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"vue": "2.6.10",
"vue-router": "3.0.6",
"vuex": "3.1.0",
"vue-simple-uploader": "^0.7.6",
"postcss-loader": "4.2.0",
"postcss-pxtorem": "5.1.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.4",
"@vue/cli-plugin-eslint": "4.4.4",
"@vue/cli-plugin-unit-jest": "4.4.4",
"@vue/cli-service": "4.4.4",
"@vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "9.5.1",
"babel-eslint": "10.1.0",
"babel-jest": "23.6.0",
"babel-plugin-dynamic-import-node": "2.3.3",
"chalk": "2.4.2",
"connect": "3.6.6",
"eslint": "6.7.2",
"eslint-plugin-vue": "^6.2.2",
"html-webpack-plugin": "3.2.0",
"mockjs": "1.0.1-beta3",
"postcss-pxtorem": "^5.1.1",
"runjs": "4.3.2",
"sass": "1.26.8",
"sass-loader": "8.0.2",
"script-ext-html-webpack-plugin": "2.1.3",
"serve-static": "1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.2",
"vue-template-compiler": "2.6.10"

[WendaoLee]

请试着使用 vue inspect --plugins 命令，排查plugin preload-index 是否有被注册。
我是使用 vue-element-template 这一模板的，在使用npm audix fix --force后由于升级相关包版本造成了preload这一模块的丢失造成的该问题。
可参考vuejs/vue-cli#1729

[WendaoLee]

请试着使用 vue inspect --plugins 命令，排查plugin preload-index 是否有被注册。 我是使用 vue-element-template 这一模板的，在使用npm audix fix --force后由于升级相关包版本造成了preload这一模块的丢失造成的该问题。 可参考vuejs/vue-cli#1729

笑了，现在迁移到vue3又出现了这个错误，搜索的时候搜到了当初的回答。
当时说的不够详细，总而言之，当时是因为我在下载模板之后使用了npm audix fix --force这条命令造成的问题，一般来讲下载这个模板的release版本后正常启动都不会有问题。我个人怀疑是因为依赖冲突的问题。不过很可惜我至今都没有精力去琢磨webpack-chain，所以无法给出一个肯切的解释。

[ufoozhenghao]

请试着使用 vue inspect --plugins 命令，排查plugin preload-index 是否有被注册。 我是使用 vue-element-template 这一模板的，在使用npm audix fix --force后由于升级相关包版本造成了preload这一模块的丢失造成的该问题。 可参考vuejs/vue-cli#1729

笑了，现在迁移到vue3又出现了这个错误，搜索的时候搜到了当初的回答。 当时说的不够详细，总而言之，当时是因为我在下载模板之后使用了npm audix fix --force这条命令造成的问题，一般来讲下载这个模板的release版本后正常启动都不会有问题。我个人怀疑是因为依赖冲突的问题。不过很可惜我至今都没有精力去琢磨webpack-chain，所以无法给出一个肯切的解释。

今天想给项目升级至vue2.7 然后run dev的时候爆了这个错误....问题是 我输入 vue inspect --plugins 还是会报一样的错误

Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload').use(<Plugin>) first.

所以你后来放弃了么

[JimmyWangj]

'I've received your email and will will reply to you as soon as possible after the vacation.————————————This is an auto reply email from QQ Mail.'

[WendaoLee]

请试着使用 vue inspect --plugins 命令，排查plugin preload-index 是否有被注册。 我是使用 vue-element-template 这一模板的，在使用npm audix fix --force后由于升级相关包版本造成了preload这一模块的丢失造成的该问题。 可参考vuejs/vue-cli#1729

笑了，现在迁移到vue3又出现了这个错误，搜索的时候搜到了当初的回答。 当时说的不够详细，总而言之，当时是因为我在下载模板之后使用了npm audix fix --force这条命令造成的问题，一般来讲下载这个模板的release版本后正常启动都不会有问题。我个人怀疑是因为依赖冲突的问题。不过很可惜我至今都没有精力去琢磨webpack-chain，所以无法给出一个肯切的解释。

今天想给项目升级至vue2.7 然后run dev的时候爆了这个错误....问题是 我输入 vue inspect --plugins 还是会报一样的错误

Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload').use(<Plugin>) first.

所以你后来放弃了么

是的。我后面回退版本了。

[ufoozhenghao]

经过几天的调试，以下是我的更新vue2.7的依赖包，没有大的Error。
eslint.js由于跨大版本，部分格式不兼容，目前发现的给贴出来了。
elementUI这块考虑到目前没有发现致命的bug或者功能无法实现，同时也害怕更新2.15后有不兼容问题，所以暂时不考虑更新。编译的时候个别element组件有语法报错的，稍微修改下就行。
axios我也更新了，如果你还在用框架的mock进行用户login和getinfo等操作的话会有bug，需要自己调整。 vue.config插件部分也有问题，webpack我也不懂（还是vite香），百度解决。

个人认为如果你只是喜欢组合式api升级到2.7就好了，如果刚需vue3的可以考虑换框架了，这个库已经没人维护了，强行升级，你成本高，团队成本也高。

更改版本后需要删除本地依赖缓存和package-lock.json。

package.json

"dependencies": {
    "axios": "1.4.0",
    "clipboard": "2.0.4",
    "codemirror": "5.58.2",
    "core-js": "3.6.5",
    "driver.js": "0.9.5",
    "dropzone": "5.5.1",
    "echarts": "5.4.3",
    "element-ui": "2.13.0",
    "file-saver": "2.0.1",
    "flv.js": "^1.6.2",
    "fuse.js": "3.4.4",
    "js-cookie": "2.2.0",
    "jsonlint": "1.6.3",
    "jszip": "3.8.0",
    "mapvgl": "^1.0.0-beta.172",
    "mqtt": "^4.3.7",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "screenfull": "4.2.0",
    "sortablejs": "1.8.4",
    "three": "^0.148.0",
    "vue": "2.7.8",
    "vue-baidu-map": "^0.21.22",
    "vue-count-to": "1.0.13",
    "vue-router": "3.0.2",
    "vue-splitpane": "1.0.4",
    "vuedraggable": "2.20.0",
    "vuex": "3.1.0",
    "xlsx": "0.16.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.18",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-unit-jest": "^4.5.18",
    "@vue/cli-service": "^4.5.18",
    "@vue/test-utils": "1.0.0-beta.29",
    "autoprefixer": "9.5.1",
    "babel-eslint": "10.1.0",
    "babel-jest": "23.6.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "2.4.2",
    "chokidar": "2.1.5",
    "connect": "3.6.6",
    "eslint": "^7.5.0",
    "eslint-plugin-vue": "^8.7.1",
    "html-webpack-plugin": "3.2.0",
    "husky": "1.3.1",
    "lint-staged": "8.1.5",
    "mockjs": "1.0.1-beta3",
    "plop": "2.3.0",
    "runjs": "4.3.2",
    "sass": "1.26.2",
    "sass-loader": "8.0.2",
    "script-ext-html-webpack-plugin": "2.1.3",
    "script-loader": "^0.7.2",
    "serve-static": "1.13.2",
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.0",
    "webpack": "^4.46.0"
  },

eslint.js

env: {
    browser: true,
    node: true,
    es6: true,
    'vue/setup-compiler-macros': true
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    'vue/first-attribute-linebreak': [2, {
      // 单行时，第一属性前不允许使用换行符
      singleline: 'beside',
      // 多行时，第一属性前必须使用换行符
      multiline: 'below',
    }],
    "vue/max-attributes-per-line": [2, {
      "singleline":  10,
      "multiline": {
        "max": 1,
        // "allowFirstLine": false
      }
    }],

vue.config

chainWebpack(config) {
    // it can improve the speed of the first screen, it is recommended to turn on preload
    // it can improve the speed of the first screen, it is recommended to turn on preload
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        // to ignore runtime.js
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])

前端的互相依赖真是个老大难的问题，各种项目每次install都会跳一大堆warning之类的，不知道什么时候会解决。