ctf0 / Laravel-Media-Manager

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

Cannot build with webpack due to `import.meta.url` #172

Closed cjprinse closed 3 years ago

cjprinse commented 3 years ago

Laravel version without laravel Manager version v3.8.0:

is it an issue related to installation or usage ?

installation

what is the error you are getting ?

ERROR in /home/cj/PhpstormProjects/etrias/etrias/vendor/ctf0/media-manager/src/resources/assets/js/modules/cache.js 6:63
Module parse failed: Unexpected token (6:63)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import "core-js/modules/web.dom-collections.iterator.js";
| import "core-js/modules/web.url.js";
> var DbWorker = new Worker(new URL('../webworkers/db.js', import.meta.url), {
|   name: 'db'
|   /* webpackEntryOptions: { filename: "workers/[name].js" } */
 @ /home/cj/PhpstormProjects/etrias/etrias/vendor/ctf0/media-manager/src/resources/assets/js/components/manager.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--3-0!./node_modules/vue-loader/lib??vue-loader-options!/home/cj/PhpstormProjects/etrias/etrias/vendor/ctf0/media-manager/src/resources/assets/js/components/manager.vue?vue&type=script&lang=js&) 9:0-37 46:53-58
 @ /home/cj/PhpstormProjects/etrias/etrias/vendor/ctf0/media-manager/src/resources/assets/js/components/manager.vue?vue&type=script&lang=js&
 @ /home/cj/PhpstormProjects/etrias/etrias/vendor/ctf0/media-manager/src/resources/assets/js/components/manager.vue
 @ ./src/AppBundle/Resources/assets/script.ts

Extra Info "attaching a screen shot would be very helpful"

I try to use the media manager without laravel. So I registered the Vue compontent in my application, and I try to build it. But, unfortunately webpack does not recognize the import.meta.url, So It cannot bundle the application.

Do You Know A Solution For this Issue ?

There is a worker-loader for webpack, for this use case https://webpack.js.org/loaders/worker-loader/

I can help with js code, But I do not have enough knowledge of Laravel for the integration.

ctf0 commented 3 years ago

i dont think it will work because of the api laravel provide, however am very interested to know more about how u r going to do that 🥇 .

for the v3.8.0 we are using laravel mix which use wp v5, we used to use worker-loader but that was on wp v4, check https://github.com/ctf0/Laravel-Media-Manager/releases/tag/v3.8.0 && https://github.com/webpack-contrib/worker-loader/issues/305#issuecomment-750904686

so for ur issue, install laravel mix v6 "which is the latest" & check the rdme for the deps requirement.

cjprinse commented 3 years ago

I tried to install v3.7.5, to test it with webpack 4. Still can't get it working.

ERROR in /home/cj/PhpstormProjects/etrias/etrias/vendor/ctf0/media-manager/src/resources/assets/js/modules/media_player.js
Module not found: Error: Can't resolve 'worker-loader' in '/home/cj/PhpstormProjects/etrias/etrias/vendor/ctf0/media-manager/src/resources/assets/js/modules'
 @ /home/cj/PhpstormProjects/etrias/etrias/vendor/ctf0/media-manager/src/resources/assets/js/modules/media_player.js 2:0-59 71:34-45
 @ ./node_modules/vue-loader/lib??vue-loader-options!/home/cj/PhpstormProjects/etrias/etrias/vendor/ctf0/media-manager/src/resources/assets/js/components/manager.vue?vue&type=script&lang=js&
 @ /home/cj/PhpstormProjects/etrias/etrias/vendor/ctf0/media-manager/src/resources/assets/js/components/manager.vue?vue&type=script&lang=js&
 @ /home/cj/PhpstormProjects/etrias/etrias/vendor/ctf0/media-manager/src/resources/assets/js/components/manager.vue
 @ ./src/AppBundle/Resources/assets/script.ts

I don't get it, because I have worker-loader installed in my node_modules.

Do you have any idea to solve this?

I saw that you want to decouple the manager from laravel. Maybe best is to build a library and include dist files. so we are not dependent of a certain version of webpack? https://webpack.js.org/guides/author-libraries/

ctf0 commented 3 years ago

I don't get it, because I have worker-loader installed in my node_modules.

i would recommend to test with the demo repo first, then try with ur build "to track the issue more accurately"

Maybe best is to build a library and include dist files.

the main problem is that i need to fully decouple the manager from using blade and have everything as a self contained component which is not an easy task.

in the same time i prefer to first finish moving away from using bulma/custom-css and toward a more organized css build so everyone can use regardless of their stack,

though any thoughts/ideas are appreciated.