I recently ran into an error that cost me some time and I could not find any solution searching in StackOverflow or other forums. When I found the fix, I realized how trivial it was. Hope it saves you some time.
When I tried to run the npm run dev in one of my projects (a theme that I purchased from
ThemeForest), I got the following error.
$ npm run dev
> vuexy-vuejs-admin-template@9.1.1 dev
> vite
failed to load config from .../starter-kit/vite.config.ts
error when starting dev server:
file:///.../starter-kit/node_modules/vite-plugin-vue-devtools/dist/vite.mjs:7
import { defineViteServerAction, callViteClientListener, initViteServerContext } from '@vue/devtools-core';
^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: The requested module '@vue/devtools-core' does not provide an export named 'callViteClientListener'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:171:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:254:5)
at async ModuleLoader.import (node:internal/modules/esm/loader:475:24)
at async loadConfigFromBundledFile (file:///.../starter-kit/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:68152:21)
at async loadConfigFromFile (file:///.../starter-kit/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:68007:28)
at async resolveConfig (file:///.../starter-kit/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:67619:28)
at async _createServer (file:///.../starter-kit/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:64257:20)
at async CAC.<anonymous> (file:///.../starter-kit/node_modules/vite/dist/node/cli.js:762:24)
The cause of this error is that vite-plugin-vue-devtools is in an older version. The fix
is to update vite-plugin-vue-devtools to the latest version. At the time of this writing, it was
7.3.1.
$ npm install --legacy-peer-deps 'vite-plugin-vue-devtools@^7.3.1'
You may be wondering what --legacy-peer-deps option is for. Without that option, I ran into this
issue:
$ npm install 'vite-plugin-dev-tools@^7.3.1'
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @videojs-player/vue@1.0.0
npm error Found: video.js@8.6.0
npm error node_modules/video.js
npm error video.js@"^7 || ^8" from @videojs/http-streaming@3.6.0
npm error node_modules/@videojs/http-streaming
npm error @videojs/http-streaming@"3.6.0" from video.js@8.6.0
npm error peer video.js@"^8" from videojs-contrib-quality-levels@4.0.0
npm error node_modules/videojs-contrib-quality-levels
npm error videojs-contrib-quality-levels@"4.0.0" from video.js@8.6.0
npm error 1 more (the root project)
npm error
npm error Could not resolve dependency:
npm error peer video.js@"7.x" from @videojs-player/vue@1.0.0
npm error node_modules/@videojs-player/vue
npm error dev @videojs-player/vue@"1.0.0" from the root project
npm error
npm error Conflicting peer dependency: video.js@7.21.6
npm error node_modules/video.js
npm error peer video.js@"7.x" from @videojs-player/vue@1.0.0
npm error node_modules/@videojs-player/vue
npm error dev @videojs-player/vue@"1.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.