VuePress Packages Version Mismatch

This morning I wanted to startup VuePress. I ran into an issue running the development server using

npm run docs:dev

That issue was the following error:

Vue packages version mismatch:
- vue@2.6.10
- vue-server-renderer@2.6.11

But the package-lock.json is loading 2.6.10 for Vue and the Vue Server Renderer:

"vue": "^2.6.10",
 "vue-loader": "^15.7.1",
"vue-router": "^3.1.3",
"vue-server-renderer": "^2.6.10",
"vue-template-compiler": "^2.6.10",

So how would this be possible? Found a similar issue at where I asked the same question. I could remove node_modules and install all again, but really felt like this was an odd bug.

NPM Update

Did an npm update in the end. Seemed there were no other quick solutions. Did then see

npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

as well as

npm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated request@2.88.2: request has been deprecated, see

Once all was done we had

> node-gyp rebuild

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/
  SOLINK_MODULE(target) Release/fse.node

> core-js@2.6.11 postinstall /Users/jasper/code/
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 

Also, the author of core-js ( ) is looking for a good job -)

> core-js@3.6.4 postinstall /Users/jasper/code/
> node -e "try{require('./postinstall')}catch(e){}"

> vuepress@1.4.0 postinstall /Users/jasper/code/
> opencollective-postinstall || exit 0

Thank you for using vuepress!
If you rely on this package, please consider supporting our open collective:

+ dropzone@5.7.0
+ fuse.js@3.6.1
+ @babel/plugin-syntax-dynamic-import@7.8.3
+ cross-env@5.2.1
+ axios@0.19.2
+ @babel/preset-env@7.9.0
+ core-js@2.6.11
+ @bugsnag/js@6.5.2
+ select2@4.0.13
+ laravel-mix@4.1.4
+ vue-analytics@5.22.1
+ sass@1.26.3
+ vue-clipboard2@0.3.1
+ vue-template-compiler@2.6.11
+ vue@2.6.11
+ vue-color@2.7.1
+ vuedraggable@2.23.2
+ @bugsnag/plugin-vue@6.5.0
+ vue-async-computed@3.8.2
+ cropperjs@1.5.6
+ vue-input-autowidth@1.0.10
+ vuepress@1.4.0
+ lottie-web@5.6.7
+ plyr@3.5.10
+ tinymce@4.9.9
added 104 packages from 36 contributors, removed 290 packages, updated 247 packages, moved 19 packages and audited 38114 packages in 118.756s

30 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

As you can see both Vue, Vue Template Compiler were updated.

ESLint Loader Issues

I then did a

npm run dev

to see if the app would still build. I ran into this ESLint related error

ERROR in multi ./resources/js/xxx.js ./resources/sass/xxx.scss ./resources/sass/xxx.scss ./resources/sass/xxx.scss ./resources/sass/xxx.scss ./resources/sass/xxx.scss ./resources/vendor/MediaManager/sass/manager.scss
Module not found: Error: Can't resolve 'eslint-loader' in '/Users/jasper/code/'
 @ multi ./resources/js/xxx.js ./resources/sass/xxx.scss ./resources/sass/xxx.scss ./resources/sass/xxx.scss ./resources/sass/xxxx.scss ./resources/sass/xxxx.scs
s ./resources/vendor/MediaManager/sass/manager.scss /js/xxx[0]

Nuclear Solution

So then I took a more radicall step and did

rm -rf node_modules && npm install

Then I ran

 npm run dev 

again hoping the ESLint issue would be resolved. It was. All started working again. Did think for a short moment one of the inner projects was borked, but that was due to a previous bug so we could continue with this upgrade as well.

Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.