Clever Geek Handbook

How to fix Vue packages version mismatch error on Laravel Spark v4.0.9?

When I run npm run dev

in Laravel Spark v4.0.9 application, I get the following error:

Module build failed: Error:

Vue packages version mismatch:

- vue@2.0.8
- vue-template-compiler@2.2.6

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

Mine package.json

looks like this:

{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "axios": "^0.15.2",
    "bootstrap": "^3.0.0",
    "cross-env": "^3.2.3",
    "jquery": "^2.1.4",
    "js-cookie": "^2.1.0",
    "laravel-mix": "0.*",
    "moment": "^2.10.6",
    "promise": "^7.1.1",
    "sweetalert": "^1.1.3",
    "underscore": "^1.8.3",
    "urijs": "^1.17.0",
    "vue": "~2.0.1",
    "vue-resource": "^1.2.0",
    "vue-router": "^2.2.1",
    "vue-truncate-filter": "^1.1.6",
    "vuejs-datepicker": "^0.6.2"
  },
  "devDependencies": {
    "browser-sync": "^2.18.8",
    "browser-sync-webpack-plugin": "^1.1.4"
  }
}

I've tried the following (at various times, not in order):

  • remote node_modules

    andnpm install

  • tried only to run yarn

    andyarn upgrade

  • uninstall vue-loader

    and reinstall
  • specifying the exact vue and vue-template-compiler versions instead of leaving it up to npm to install or yarn to define dependencies
  • removing other non-essential packages (vue-router, vue-truncate-filter, vuejs-datepicker) and re-executing all of the above
  • banging my head against the wall
+22


source to share


11 replies


This worked for me:



  • Edit package.json

    :

    "vue": "^2.0.8",
"vue-template-compiler": "^2.1.8"

  • Delete node_modules

  • Run npm install

+17


source


For vue ^2.5.17

.

In your package.json

Just add this to devDependencies

or update the version vue-template-compiler

:

  • "vue-template-compiler": "^2.5.17"

You will have this output:



"devDependencies": {
  ...
  "lodash": "^4.17.4",
  "popper.js": "^1.14.4",
  "vue": "^2.5.17", // <= note the version
  "vue-template-compiler": "^2.5.17" // <= note the version
},

After that run:

  • npm installation

Npm will only update updated packages.

+19


source


Executing the following command helped me

npm install vue-template-compiler@2.5.16 --save-dev

NB. Replace the version number with the correct version you want. In my case, the vue version was 2.5.16 and the vue-template-compiler was 2.5.13 , so I updated vue-template-compiler to vue.

Hope this helps someone

Vue package version mismatch bug fix

+6


source


You don't need to delete all folders node_modules

. Just update packages: vue

, vue-template-compiler

, and vue-server-renderer

a @latest

flag @latest

, and it should help in all cases with mismatched versions vue packages.

npm vue-template-compiler@latest --save

npm vue-server-renderer@latest --save

--save

will automatically update the version in your file package.json

. @latest

means to install the latest available version of the package. If you need to update, vue

do it the same way as we do in the example above.

You can always check for new versions for updates using the command: npm outdated

. It shows you the entire list of packages that need to be updated.

By the way, the command npm update

only updates the minor version and fixes the versions, but it doesn't work when you want to update the major version. For example, npm update

will not update 2.4.5

=> 3.0.1

, but may update

+6


source


Here the vue template compiler compiles the vue template. If you are using vue one version and vue-template-compiler a different version this is a problem.

Run this command

npm update vue-template-compiler

This will fix the problem and it will install the vue template compiler the same as the vue js version.

+4


source


Check the dependency for vue

and replace with the exact dev dependency level for vue-template-compiler

.

For example,

"dependencies": {
    "vue": "^2.5.2",
},
"devDependencies": {
    "vue-template-compiler": "^2.5.3",
},

Should be replaced with:

"dependencies": {
    "vue": "2.5.2",
},
"devDependencies": {
    "vue-template-compiler": "2.5.2",
},

And run again npm install

.

+3


source


Try it: npm install vue-template-compiler@2.0.8 --save-dev

Converting the version vue-template-compiler

to the same version vue

(for this case 2.0.8

) worked for me. Try it.

+3


source


Based on the accepted answer, instead of deleting the node_modules folder and rerunning yarn yarn install

, you can simply update these 2 packages directly:

yarn upgrade vue@^2.0.8
yarn upgrade vue-template-compiler@^2.1.8
+2


source


This worked for me:

  • Change package.json: "vue": "^ 2.5.2" to "vue": "2.5. *"
  • Delete node_modules folder
  • Remove package-lock.json
  • Run npm install
+1


source


You don't need to delete the node_modules folder.

- vue@2.0.8 - vue-template-compiler@2.2.6

Update the package with a lower version number. In this case npm update vue

. Optionally, you can alsonpm update vue-loader

0


source


I used npm install vue --save

and it worked for me

0


source






More articles:


All Articles