TypeError: Cannot read property 'tap' of undefined

Current behavior

Getting error while running vue-cli-service styleguidist

To reproduce

package.json

"dependencies": {
        "@sentry/tracing": "6.13.3",
        "@sentry/vue": "6.13.3",
        "abortcontroller-polyfill": "1.7.3",
        "axios": "0.21.4",
        "babel-plugin-polyfill-corejs3": "0.2.5",
        "core-js": "3.18.3",
        "debounce": "1.2.1",
        "highcharts": "8.2.2",
        "howler": "2.2.3",
        "inputmask": "5.0.6",
        "js-base64": "3.7.2",
        "lodash": "4.17.21",
        "luxon": "1.28.0",
        "normalize.css": "8.0.1",
        "pdfmake": "0.2.4",
        "portal-vue": "2.1.7",
        "qrcode": "1.5.0",
        "qs": "6.10.1",
        "regenerator-runtime": "0.13.9",
        "sanitize-html": "1.27.5",
        "tinycolor2": "1.4.2",
        "v-click-outside": "3.1.2",
        "vue": "2.6.14",
        "vue-class-component": "7.2.6",
        "vue-clipboard2": "0.3.3",
        "vue-i18n": "8.26.5",
        "vue-json-viewer": "2.2.21",
        "vue-property-decorator": "8.5.1",
        "vue-router": "3.5.2",
        "vue-scrollto": "2.20.0",
        "vuelidate": "0.7.6",
        "vuex": "3.6.2",
        "vuex-simple": "2.2.0",
        "wavesurfer.js": "5.2.0",
        "xlsx": "0.16.9"
    },
    "devDependencies": {
        "@babel/core": "7.19.1",
        "@sentry/webpack-plugin": "1.19.0",
        "@types/clone": "0.1.30",
        "@types/howler": "2.2.7",
        "@types/inputmask": "5.0.3",
        "@types/lodash": "4.14.185",
        "@types/luxon": "1.27.1",
        "@types/pdfmake": "0.2.1",
        "@types/qrcode": "1.5.0",
        "@types/qs": "6.9.7",
        "@types/sanitize-html": "1.27.2",
        "@types/tinycolor2": "1.4.3",
        "@types/vuelidate": "0.7.15",
        "@types/wavesurfer.js": "5.2.2",
        "@types/webpack": "4.41.32",
        "@typescript-eslint/eslint-plugin": "5.4.0",
        "@typescript-eslint/parser": "5.4.0",
        "@vue/cli-plugin-babel": "4.5.19",
        "@vue/cli-plugin-eslint": "4.5.19",
        "@vue/cli-plugin-router": "4.5.19",
        "@vue/cli-plugin-typescript": "4.5.19",
        "@vue/cli-plugin-vuex": "4.5.19",
        "@vue/cli-service": "4.5.19",
        "@vue/eslint-config-prettier": "7.0.0",
        "@vue/eslint-config-typescript": "11.0.2",
        "@zeplin/cli": "1.1.12",
        "babel-loader": "8.2.5",
        "babel-preset-vue": "2.0.2",
        "chokidar": "3.5.3",
        "clean-webpack-plugin": "4.0.0",
        "compression-webpack-plugin": "6.1.1",
        "concurrently": "6.4.0",
        "cross-env": "7.0.3",
        "deepmerge": "4.2.2",
        "dir-compare": "4.0.0",
        "eslint": "^7.32.0",
        "eslint-plugin-local-rules": "0.1.1",
        "eslint-plugin-prettier": "3.4.1",
        "eslint-plugin-unicorn": "40.1.0",
        "eslint-plugin-vue": "9.5.1",
        "file-loader": "6.2.0",
        "get-css-variables": "0.3.0",
        "husky": "4.3.8",
        "lint-staged": "10.5.4",
        "mjml": "4.13.0",
        "node-sass": "4.14.1",
        "prettier": "1.19.1",
        "recursive-copy": "2.0.13",
        "sass": "1.26.11",
        "sass-loader": "8.0.2",
        "typescript": "4.5.5",
        "typograf": "6.14.0",
        "vue-cli-plugin-i18n": "1.0.1",
        "vue-cli-plugin-styleguidist": "~4.45.1",
        "vue-template-compiler": "2.6.14",
        "zeplin-cli-connect-plugin-vue": "1.1.0"
    }

Error

‼ ｢wds｣: transportMode is an experimental option, meaning its usage could potentially change without warning
TypeError: Cannot read property 'tap' of undefined
    at D:\projects\webapp\media\vue\node_modules\@vue\preload-webpack-plugin\src\index.js:115:65
    at SyncHook.eval [as call] (eval at create (D:\projects\webapp\media\vue\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:15:1)
    at SyncHook.lazyCompileHook (D:\projects\webapp\media\vue\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.newCompilation (D:\projects\webapp\media\vue\node_modules\webpack\lib\Compiler.js:631:26)
    at D:\projects\webapp\media\vue\node_modules\webpack\lib\Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\projects\webapp\media\vue\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:\projects\webapp\media\vue\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.compile (D:\projects\webapp\media\vue\node_modules\webpack\lib\Compiler.js:662:28)
    at D:\projects\webapp\media\vue\node_modules\webpack\lib\Watching.js:77:18
    at _next0 (eval at create (D:\projects\webapp\media\vue\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:25:1)
    at eval (eval at create (D:\projects\webapp\media\vue\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:34:1)
    at watchRun (D:\projects\webapp\media\vue\node_modules\fork-ts-checker-webpack-plugin\lib\index.js:252:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\projects\webapp\media\vue\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:30:1)
    at AsyncSeriesHook.lazyCompileHook (D:\projects\webapp\media\vue\node_modules\tapable\lib\Hook.js:154:20)
    at Watching._go (D:\projects\webapp\media\vue\node_modules\webpack\lib\Watching.js:41:32)
    at D:\projects\webapp\media\vue\node_modules\webpack\lib\Watching.js:33:9

Expected behavior

localhost with our guide started 😃

[elevatebart]

I gotta fix ready to ship

[wal0x]

Updated to “vue-cli-plugin-styleguidist”: “4.54.4” and it works, no more error. No need to add “vue-styleguidist”: “4.45.2” as a dependency anymore.