Vue packages version mismatch [email protected]

I installed the latest laravel 8 and I created a fronted in vue 3.

When compile:

ERROR in ./resources/vue-admin/js/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):


Vue packages version mismatch:

- [email protected] (/var/www/test_laravel_8/node_modules/vue/index.js)
- [email protected] (/var/www/test_laravel_8/node_modules/vue-template-compiler/package.json)

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.

 @ ./resources/vue-admin/js/app.js 6:0-24 29:20-23
 @ multi ./resources/vue-admin/js/app.js ./resources/vue-admin/sass/app.scss

I also found this:

https://github.com/JeffreyWay/laravel-mix/issues/2481

it will be fixed in laravel-mix 6

Any idea how to fix this in laravel-mix (5.0.9) that came with laravel 8 ???

calin.ionut

5 years ago

Level 5

I am trying to replace vue-template-compiler with @vue/compiler-sfc

https://stackoverflow.com/questions/63863222/after-upgrading-to-vue-3-cannot-find-module-vue-compiler-sfc-package-json

BUT.... when run npm run dev

 cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

        Additional dependencies must be installed. This will only take a moment.
 
        Running: npm install vue-template-compiler --save-dev --production=false

it install automatically ...

How can I prevent installing vue-template-compiler ????

calin.ionut

5 years ago

Best Answer

Level 5

fixed with the upgrade to laravel-mix 6

https://github.com/JeffreyWay/laravel-mix/blob/master/UPGRADE.md

My package.json

{
    "private": true,
    "scripts": {
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.3",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.0-beta.14",
        "lodash": "^4.17.19",
        "postcss": "^8.1.10",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.29.0",
        "sass-loader": "^8.0.2",
        "vue-loader": "^16.1.0",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "mitt": "^2.1.0",
        "vue": "^3.0.3",
        "vue-cookie-next": "^1.0.3",
        "vue-router": "^4.0.0-rc.6",
        "vue-sweetalert2": "^4.1.1"
    }
}

and webpack.mix.js

const mix = require('laravel-mix');
mix.js('resources/vue-admin/js/app.js', 'public/admin-store/js')
    .sass('resources/vue-admin/sass/app.scss', 'public/admin-store/css')
    .options({ processCssUrls: false })  
    .vue({ version: 3 });

Please or to participate in this conversation.