Laravel-Media-Manager: Uncaught ReferenceError: Vue is not defined

app.js

require('./bootstrap');

import  Vue from  'vue';


require('../assets/vendor/MediaManager/js/manager')

new Vue({
    el: '#app'
})

npm run dev successfully compiled. http://127.0.0.1:8000/media show error in chrom developer console

Uncaught ReferenceError: Vue is not defined
    at Module../resources/assets/vendor/MediaManager/js/manager.js (app.js:5132)
    at __webpack_require__ (app.js:87950)
    at Module../resources/js/app.js (app.js:8901)
    at __webpack_require__ (app.js:87950)
    at checkDeferredModulesImpl (app.js:88114)
    at Function.__webpack_require__.x (app.js:88127)
    at app.js:88133
    at app.js:88134

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.32.2",
        "sass-loader": "^8.0.2",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "annyang": "^2.6.1",
        "buffer": "^6.0.3",
        "cropperjs": "^1.5.9",
        "dropzone": "^5.7.2",
        "fuse.js": "^6.4.6",
        "idb-keyval": "^3.2.0",
        "keycode": "^2.2.0",
        "lottie-web": "^5.7.5",
        "music-metadata-browser": "^2.1.9",
        "plyr": "^3.6.3",
        "process": "^0.11.10",
        "vue": "^2.6.12",
        "vue-awesome": "^2.3.8",
        "vue-clipboard2": "^0.3.1",
        "vue-focuspoint-component": "^2.0.1",
        "vue-image-compare2": "^1.0.0",
        "vue-infinite-loading": "^2.4.5",
        "vue-input-autowidth": "^1.0.10",
        "vue-ls": "^3.2.1",
        "vue-notif": "^1.1.10",
        "vue-tippy": "^2.1.3",
        "vue-touch": "^2.0.0-beta.4",
        "vue2-filters": "^0.11.1"
    }
}

composer.json

    "require": {
        "php": "^7.3|^8.0",
        "ctf0/media-manager": "^3.8",
        "fideloper/proxy": "^4.4",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.12",
        "laravel/tinker": "^2.5"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.2",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3.3"
    }

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 16 (9 by maintainers)

Most upvoted comments

Luckily did find the solution . New Mix automatically loaded vue.esm.js and we needed vue.common.js . Added additional configuration block to webpack.mix.js:

mix.webpackConfig({
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js' 

    }
  }
})

and now it is fine. Took me a long time figuring that out though .

jasperf on Nov 3, 2021