Uncaught TypeError: GlobalVue.use is not a function

[markcameron]

I've updated a project to use Nova 4, using 3.8.0 of this package, and when I load a resource with one of the Files:: fields I get the following error:

Uncaught TypeError: GlobalVue.use is not a function
    at Module.<anonymous> (media-lib-images-field:55622:13)
    at Module../node_modules/vuejs-clipper/src/clipper.js (media-lib-images-field:55627:30)
    at __webpack_require__ (media-lib-images-field:20:30)
    at Module../resources/js/field.js (media-lib-images-field:57984:71)
    at __webpack_require__ (media-lib-images-field:20:30)
    at Object.0 (media-lib-images-field:58022:1)
    at __webpack_require__ (media-lib-images-field:20:30)
    at media-lib-images-field:84:18
    at media-lib-images-field:87:10

Which seems to be from this file here https://github.com/ebess/advanced-nova-media-library/blob/master/dist/js/field.js

I'm not sure if it has something to do with the upgrade to Vue 3, and maybe the JS just needs to be rebuilt or something. (I don't even need to have a Files::make field on the resource, just having the ebess/advanced-nova-media-library installed is enough for the error to appear in the console.)

I also tried it on a fresh Laravel install with a fresh copy of Nova 4, and I also get the error and no field shows up in the resource edit or view.

[bkintanar]

Thanks! I will check on it and report back soon.

-- Bertrand Kintanar @. On Apr 5, 2022, 10:58 PM +0800, Mark Cameron @.>, wrote:

I've updated a project to use Nova 4, and when I load a resource with one of the Files:: fields I get the following error: Uncaught TypeError: GlobalVue.use is not a function at Module. (media-lib-images-field:55622:13) at Module../node_modules/vuejs-clipper/src/clipper.js (media-lib-images-field:55627:30) at webpack_require (media-lib-images-field:20:30) at Module../resources/js/field.js (media-lib-images-field:57984:71) at webpack_require (media-lib-images-field:20:30) at Object.0 (media-lib-images-field:58022:1) at __webpack_require__ (media-lib-images-field:20:30) at media-lib-images-field:84:18 at media-lib-images-field:87:10 Which seems to be from this file here https://github.com/ebess/advanced-nova-media-library/blob/master/dist/js/field.js I'm not sure if it has something to do with the upgrade to Vue 3, and maybe the JS just needs to be rebuilt or something. (I don't even need to have a Files::make field on the resource, just having the ebess/advanced-nova-media-library installed is enough for the error to appear in the console.) I also tried it on a fresh Laravel install with a fresh copy of Nova 4, and I also get the error and no field shows up in the resource edit or view. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

[Kussie]

I believe need to update the webpack.mix.js file per the docs: https://nova.laravel.com/docs/4.0/upgrade.html#vue-3

[mertasan]

I'm trying to fix this but I'm having problems similar to this. laravel/nova-issues#3814

[figurluk]

any progress?

[mertasan]

@figurluk

I'm assuming this isn't a Nova bug and I'm trying to find the source of the problem.

I'm having the same issue with several packages. If I can fix this problem, I will have made several Nova packages compatible.

It could be something with the dependency versions, there may be an additional dependency that needs to be added, or I may be doing something wrong.

I'm currently trying to fix this problem with nova-sortable.

Please feel free to share your ideas.

[larsjanssen6]

Same problem here after the upgrade. Will try to dive into this :)

[xiCO2k]

Getting the same issue here!

[TheNerka]

i found a problem but i don't know if it's a problem. Nova 4.0 use Vue 3, this extension use Vue 2 I don't know if this fix can help

[illambo]

I note this which can be useful for migration to Vue 3 :

If you have an existing Vue 2 project or library that you intend to upgrade to Vue 3, we provide a build of Vue 3 that offers Vue 2 compatible APIs.

https://v3-migration.vuejs.org/#migration-build

[oleghalin]

Just created PR which fixes basic feature of package for Nova 4, but because of unsupported third-party packages like vuejs-clipper i deleted it from my PR version

https://github.com/ebess/advanced-nova-media-library/pull/315

[markcameron]

@oleghalin Thanks for that, works like a charm since I don't need to cropping functionality