search

ctf0 / Laravel-Media-Manager

A "Vuejs & Laravel" Media Manager With Tons of Features
MIT License
829 stars 179 forks source link

Uncaught ReferenceError: Vue is not defined #174

Closed Zubair-Iftikhar closed 3 years ago

Zubair-Iftikhar commented 3 years ago

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"
    }
ctf0 commented 3 years ago

it should be window.Vue = require('vue')

Zubair-Iftikhar commented 3 years ago

window.Vue = require('vue')

i use this statement. but same error "Uncaught TypeError: window.Vue.use is not a function"

ctf0 commented 3 years ago

window.Vue.use ?

plz check the demo repo

Zubair-Iftikhar commented 3 years ago

app.js

require('./bootstrap');

window.Vue = require('vue')

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

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

by access media route .error shown in chrome developer console..

app.js:75785 Uncaught TypeError: window.Vue.use is not a function
    at Module.<anonymous> (app.js:75785)
    at __nested_webpack_require_573__ (app.js:74974)
    at app.js:75038
    at app.js:75041
    at webpackUniversalModuleDefinition (app.js:74952)
    at Object../node_modules/vue2-filters/dist/vue2-filters.js (app.js:74954)
    at __webpack_require__ (app.js:87947)
    at Module../resources/assets/vendor/MediaManager/js/manager.js (app.js:5127)
    at __webpack_require__ (app.js:87947)
    at Object../resources/js/app.js (app.js:8898)

in app.js Line #75785 

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(Vue2Filters);
  window.Vue2Filters = Vue2Filters;
}

this line causes the error window.Vue.use(Vue2Filters)

ctf0 commented 3 years ago

can u reproduce using the demo repo ?

Zubair-Iftikhar commented 3 years ago

using clone demo repo after npm run watch these error shown in cmd.

ERROR in ./resources/assets/vendor/MediaManager/js/components/utils/icon-types.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (E:\workspace\demo\media-manager\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (E:\workspace\demo\media-manager\node_modules\vue-loader\lib\index.js:67:22)

ERROR in ./node_modules/vuemit/src/Vuemit.js 9:12-26
Module not found: Error: Can't resolve 'vue' in 'E:\workspace\demo\media-manager\node_modules\vuemit\src'
ctf0 commented 3 years ago

sorry for the late replay, u r correct, after the last mix patch 6.0.9 ref things went south, i will ping u once fixed.

thank you for reporting.

thanhtung2693 commented 3 years ago

Hi, I'm having the same issue using a fresh installed project (laravel-mix 6.0.6). Is there any temporary way to fix this? Seems like the issue is not from mix patch 6.0.9.

image

image

ctf0 commented 3 years ago

Is there any temporary way to fix this ?

yeah

  1. install mix v6.0.3
  2. follow https://github.com/ctf0/Laravel-Media-Manager/wiki/Laravel-Mix-V6

demo repo is also reverted back to 6.0.3

ctf0 commented 3 years ago

good news, all done except a couple of minor issues, will update once done.

ctf0 commented 3 years ago

the issue should be fully solved now, plz re-check and test with demo repo and reply back if the problem still persist, thanx again for ur time & reporting.

suddham commented 3 years ago

Hi, I'm having the same issue using a fresh installed project (laravel-mix 6.0.6). Is there any temporary way to fix this? Seems like the issue is not from mix patch 6.0.9.

image

image

Hi i was having very similar issues till I realized removing Vue from the mix.autoload fixed my problem.

This what I had before and I removed vue from the autoload.

mix.autoload({
    jquery: ["$", "window.jQuery"],
    vue: ["window.Vue"],
    lodash: ["window._", "_"],
    axios: ["window.axios", "axios"]
});
jasperf commented 2 years ago

Similar issues now testing Laravel Mix 6.037 . When I import Vue I am told Vue is not a constructor in vuemit used by Laravel Media Manager. When I attach Vue to window and require I get Vue.use is not a function referring to first Vue.use in app.js (editor.js in our case and Vue Portal).

So importing like this:

require('./bootstrap');

import Vue from 'vue';
import Vuex from 'vuex'
import store from './store/editor'

/**
 * Import classes and bind to window for use through the application
 */

import PortalVue from 'portal-vue';
Vue.use(PortalVue);
import Module from './classes/Module'
....
require('../assets/vendor/MediaManager/js/manager.js')
...

and app balks that Vue is not a constructor referring to manager.js loading vuemit. And if I do require Vue.use in app.js dies on me.

Also see https://forum.vuejs.org/t/laravel-mix-6-webpack-5-upgrade-vue-use-is-not-a-function-portalvue/123363/11 where I am debugging in more detail and trying to solve the issue.

ctf0 commented 2 years ago

@jasperf actually this issue was fixed already https://github.com/gocanto/vuemit/pull/40 not sure why u r getting this now, sadly laravel-mix 6x is f*cking things up from one release to another, if possible i would recommend to stick to whatever old version of mix was working for u

jasperf commented 2 years ago

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 .

ctf0 commented 2 years ago

@jasperf thanks for this, i will add it to the wiki