Cannot build with webpack due to import.meta.url

[cjprinse]

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]

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 && webpack-contrib/worker-loader#305 (comment)

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

[cjprinse]

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]

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"

• mix v5 "using worker-loader"
  https://github.com/ctf0/demos/tree/44777a801328ba7a1a25bc1eac349f5064a36c2f

• mix v6 "native wp workers"
  https://github.com/ctf0/demos/tree/media-manager

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.