Vue packages version mismatch #2481

thecyrilcril · 2020-09-19T05:24:49Z

Laravel Mix Version: 5.0.5 (npm list --depth=0)
Node Version (node -v): 12.16.1
NPM Version (npm -v): 6.13.4
OS: Windows

Description:

I have a laravel 7 project that uses vue 3 but I each time I run npm run watch I get

 C:\wamp64\www\Lendr  @   master ± 
λ npm run watch

> @ watch C:\wamp64\www\Lendr
> npm run development -- --watch


> @ development C:\wamp64\www\Lendr
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

10% building 1/1 modules 0 active
webpack is watching the files…

15% building 45/46 modules 1 active ...ostcss0!C:\wamp64\www\Lendr\node_modules\sass-loader\dist\cjs.js??ref--5-4!C:\wamp64\www\Lendr\resources\sass\app.sass risk - There are upcoming breaking changes: purgeLayersByDefault
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes
98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 2 errors                                                                                                             6:12:03 AM

This dependency was not found:

* vue in ./node_modules/vue-router/dist/vue-router.esm-browser.js, ./resources/js/app.js

To install it, you can run: npm install --save vue
       Asset      Size   Chunks             Chunk Names
/css/app.css  3.03 MiB  /js/app  [emitted]  /js/app
  /js/app.js   191 KiB  /js/app  [emitted]  /js/app

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


Vue packages version mismatch:

- vue@3.0.0 (C:\wamp64\www\Lendr\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\wamp64\www\Lendr\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/js/app.js 4:0-39 6:10-13
 @ multi ./resources/js/app.js ./resources/sass/app.sass

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


Vue packages version mismatch:

- vue@3.0.0 (C:\wamp64\www\Lendr\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\wamp64\www\Lendr\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/js/router.js 4:0-32 72:13-17
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

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


Vue packages version mismatch:

- vue@3.0.0 (C:\wamp64\www\Lendr\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\wamp64\www\Lendr\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/js/router.js 7:0-46 88:13-24
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

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


Vue packages version mismatch:

- vue@3.0.0 (C:\wamp64\www\Lendr\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\wamp64\www\Lendr\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/js/router.js 6:0-34 84:13-18
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

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


Vue packages version mismatch:

- vue@3.0.0 (C:\wamp64\www\Lendr\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\wamp64\www\Lendr\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/js/router.js 5:0-38 80:13-20
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

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


Vue packages version mismatch:

- vue@3.0.0 (C:\wamp64\www\Lendr\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\wamp64\www\Lendr\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/js/router.js 8:0-40 92:13-21
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

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


Vue packages version mismatch:

- vue@3.0.0 (C:\wamp64\www\Lendr\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\wamp64\www\Lendr\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/js/router.js 3:0-40 68:13-21
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

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


Vue packages version mismatch:

- vue@3.0.0 (C:\wamp64\www\Lendr\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\wamp64\www\Lendr\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/js/router.js 9:0-40 96:13-21
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

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


Vue packages version mismatch:

- vue@3.0.0 (C:\wamp64\www\Lendr\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\wamp64\www\Lendr\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/js/router.js 10:0-34 100:13-18
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

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


Vue packages version mismatch:

- vue@3.0.0 (C:\wamp64\www\Lendr\node_modules\vue\index.js)
- vue-template-compiler@2.6.12 (C:\wamp64\www\Lendr\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/js/router.js 11:0-40 104:13-21
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./resources/js/components/App.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\wamp64\www\Lendr\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (C:\wamp64\www\Lendr\node_modules\vue-loader\lib\index.js:67:22)
 @ ./resources/js/app.js 4:0-39 6:10-13
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./resources/js/views/Home.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\wamp64\www\Lendr\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (C:\wamp64\www\Lendr\node_modules\vue-loader\lib\index.js:67:22)
 @ ./resources/js/router.js 4:0-32 72:13-17
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./resources/js/views/Withdrawals.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\wamp64\www\Lendr\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (C:\wamp64\www\Lendr\node_modules\vue-loader\lib\index.js:67:22)
 @ ./resources/js/router.js 7:0-46 88:13-24
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./resources/js/views/Loans.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\wamp64\www\Lendr\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (C:\wamp64\www\Lendr\node_modules\vue-loader\lib\index.js:67:22)
 @ ./resources/js/router.js 6:0-34 84:13-18
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./resources/js/views/Savings.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\wamp64\www\Lendr\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (C:\wamp64\www\Lendr\node_modules\vue-loader\lib\index.js:67:22)
 @ ./resources/js/router.js 5:0-38 80:13-20
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./resources/js/views/Maketers.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\wamp64\www\Lendr\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (C:\wamp64\www\Lendr\node_modules\vue-loader\lib\index.js:67:22)
 @ ./resources/js/router.js 8:0-40 92:13-21
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./resources/js/views/NotFound.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\wamp64\www\Lendr\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (C:\wamp64\www\Lendr\node_modules\vue-loader\lib\index.js:67:22)
 @ ./resources/js/router.js 3:0-40 68:13-21
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./resources/js/views/Finances.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\wamp64\www\Lendr\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (C:\wamp64\www\Lendr\node_modules\vue-loader\lib\index.js:67:22)
 @ ./resources/js/router.js 9:0-40 96:13-21
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./resources/js/views/Tithe.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\wamp64\www\Lendr\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (C:\wamp64\www\Lendr\node_modules\vue-loader\lib\index.js:67:22)
 @ ./resources/js/router.js 10:0-34 100:13-18
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./resources/js/views/Settings.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\wamp64\www\Lendr\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (C:\wamp64\www\Lendr\node_modules\vue-loader\lib\index.js:67:22)
 @ ./resources/js/router.js 11:0-40 104:13-21
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./node_modules/vue-router/dist/vue-router.esm-browser.js
Module not found: Error: Can't resolve 'vue' in 'C:\wamp64\www\Lendr\node_modules\vue-router\dist'
 @ ./node_modules/vue-router/dist/vue-router.esm-browser.js 6:0-196 1726:4-15 1727:4-17 1728:4-15 1743:10-28 1744:8-14 1747:25-31 1750:12-18 1763:10-28 1764:8-14 1767:25-31 1770:12-18 1816:24-30 1826:20-26 1839:12-18 1853:16-22 1870:20-26 1907:19-25 1908:25-31 1909:18-26 1909:48-53 1910:30-38 1934:21-29 1936:26-34 1941:26-31 1941:69-74 1946:14-22 1952:23-38 1969:21-29 1970:28-34 1971:24-32 1984:18-19 2061:23-38 2072:30-36 2073:22-28 2074:32-40 2075:8-15 2076:8-15 2077:24-27 2080:8-13 2129:30-31 2151:21-39 2180:25-35 2625:15-23 2657:27-32 2676:37-45 2679:42-50 2727:11-17 2734:11-17
 @ ./resources/js/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.sass

ERROR in ./resources/js/app.js
Module not found: Error: Can't resolve 'vue' in 'C:\wamp64\www\Lendr\resources\js'
 @ ./resources/js/app.js 3:0-32 6:0-9
 @ multi ./resources/js/app.js ./resources/sass/app.sass
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'
[Browsersync] Proxying: http://127.0.0.1:6060
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.117:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "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",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/custom-forms": "^0.2.1",
        "axios": "^0.19",
        "browser-sync": "^2.26.12",
        "browser-sync-webpack-plugin": "^2.2.2",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.5",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.26.11",
        "sass-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "npm-okrajs": "^1.0.8",
        "tailwindcss": "^1.8.10",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-beta.10"
    }
}

app.js

require('./bootstrap');
import { createApp } from 'vue'
import App from './components/App.vue';
import router from './router'


createApp(App).use(router).mount('#app')

bootstrap.js

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

router.js

import { createWebHistory, createRouter } from 'vue-router';

import NotFound from './views/NotFound';
import Home from './views/Home';
import Savings from './views/Savings';
import Loans from './views/Loans';
import Withdrawals from './views/Withdrawals';
import Maketers from './views/Maketers';
import Finances from './views/Finances';
import Tithe from './views/Tithe';
import Settings from './views/Settings';

const routes = [
  {
    path: '*',
    component: NotFound
  },
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/accounts',
    name: 'accounts',
    component: Accounts
  },
  {
    path: '/savings',
    name: 'savings',
    component: Savings
  },
  {
    path: '/loans',
    name: 'loans',
    component: Loans
  },
  {
    path: '/withdrawals',
    name: 'withdrawals',
    component: Withdrawals
  },
  {
    path: '/maketers',
    name: 'maketers',
    component: Maketers
  },
  {
    path: '/finances',
    name: 'finances',
    component: Finances
  },
  {
    path: '/tithe',
    name: 'tithe',
    component: Tithe
  },
  {
    path: '/settings',
    name: 'settings',
    component: Settings
  }
];


const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: () => ({
    y: 0
  }),
  linkActiveClass: '',
  routes,
});

export default router;

App.vue

<template>
  <div id="app" class="flex">
    <div class="w-48">
      <Navigation></Navigation>
    </div>

    <div class="flex-1 content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Navigation from "./Navigation";
import Okra from "npm-okrajs";
export default {
  name: "App",
  components: {
    Navigation,
  },
  data() {
    return {
      Okra,
    };
  },
};
</script>

<style lang="css" scoped>
</style>

Steps To Reproduce:

just running npm run watch with the above configurations

The text was updated successfully, but these errors were encountered:

JeffreyWay · 2020-09-24T15:11:40Z

We have this fixed for the next release.

thecrypticace mentioned this issue Sep 21, 2020

Extract all Vue logic from mix.js() #2483

Closed

JeffreyWay closed this as completed Sep 24, 2020

snyk-bot mentioned this issue Mar 15, 2022

[Snyk] Security upgrade webpack-dev-server from 2.11.5 to 3.11.3 sokis/laravel-mix#36

Open

sokis mentioned this issue May 10, 2022

[Snyk] Fix for 1 vulnerabilities sokis/laravel-mix#38

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue packages version mismatch #2481

Vue packages version mismatch #2481

thecyrilcril commented Sep 19, 2020

JeffreyWay commented Sep 24, 2020

Vue packages version mismatch #2481

Vue packages version mismatch #2481

Comments

thecyrilcril commented Sep 19, 2020

Description:

package.json

app.js

bootstrap.js

router.js

App.vue

Steps To Reproduce:

JeffreyWay commented Sep 24, 2020