JS compilling error

[Yoji]

An error occurs during compilation (npm run production), tell me what could be the problem?

ERROR in ./resources/assets/vendor/MediaManager/js/modules/cache.js 1:63
Module parse failed: Unexpected token (1: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.
> var DbWorker = new Worker(new URL('../webworkers/db.js', import.meta.url), {
|   name: 'db'
|   /* webpackEntryOptions: { filename: "workers/[name].js" } */
 @ ./resources/assets/vendor/MediaManager/js/components/manager.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-option
s!./resources/assets/vendor/MediaManager/js/components/manager.vue?vue&type=script&lang=js&) 7:0-37 44:53-58
 @ ./resources/assets/vendor/MediaManager/js/components/manager.vue?vue&type=script&lang=js&
 @ ./resources/assets/vendor/MediaManager/js/components/manager.vue
 @ ./resources/assets/vendor/MediaManager/js/manager.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/assets/vendor/MediaManager/sass/manager.scss

ERROR in ./resources/assets/vendor/MediaManager/js/modules/media_player.js 3:69
Module parse failed: Unexpected token (3:69)
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 omit from 'lodash/omit';
| import Plyr from 'plyr';
> var AudioWorker = new Worker(new URL('../webworkers/audio.js', import.meta.url), {
|   name: 'audio'
|   /* webpackEntryOptions: { filename: "workers/[name].js" } */
 @ ./resources/assets/vendor/MediaManager/js/components/manager.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-option
s!./resources/assets/vendor/MediaManager/js/components/manager.vue?vue&type=script&lang=js&) 18:0-50 44:162-173
 @ ./resources/assets/vendor/MediaManager/js/components/manager.vue?vue&type=script&lang=js&
 @ ./resources/assets/vendor/MediaManager/js/components/manager.vue
 @ ./resources/assets/vendor/MediaManager/js/manager.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/assets/vendor/MediaManager/sass/manager.scss

[ctf0]

have u followed the rdme ? have u tried the demo repo ?

[Yoji]

Yes, I installed it according to the instructions, inserted a line for mix 5 in the js

window.Vue = require('vue');
require('../assets/vendor/MediaManager/js/manager')
const app = new Vue({
    el: '#app',
});

package.json:

"dependencies": {
        "@open-wc/webpack-import-meta-loader": "^0.4.7",
        "annyang": "^2.6.1",
        "bootstrap": "^4.5.2",
        "cropperjs": "^1.5.12",
        "dropzone": "^5.9.3",
        "fuse.js": "^6.4.6",
        "idb-keyval": "^6.0.2",
        "keycode": "^2.2.0",
        "lottie-web": "^5.7.13",
        "music-metadata-browser": "^2.5.0",
        "plyr": "^3.6.8",
        "vue": "^2.6.14",
        "vue-awesome": "^4.3.1",
        "vue-clipboard2": "^0.3.3",
        "vue-focuspoint-component": "^2.0.1",
        "vue-image-compare2": "^1.0.0",
        "vue-infinite-loading": "^2.4.5",
        "vue-input-autowidth": "^1.0.11",
        "vue-ls": "^3.2.2",
        "vue-notif": "^2.0.0",
        "vue-tippy": "v2",
        "vue-touch": "^2.0.0-beta.4",
        "vue2-filters": "^0.13.0"
    }

As I understand it, the problem is in import.meta.url

I understand that I probably made a mistake somewhere, but I can't find the problem.

[ctf0]

can u test ur setup with the demo repo ?

[Yoji]

Was it possible to solve the problem in this way:

1. Added @open-wc/webpack-import-meta-loader
2. webpack.mix.js added lines:

   
   mix.extend("addWebpackLoaders", (webpackConfig, loaderRules) => {
   loaderRules.forEach((loaderRule) => {
       webpackConfig.module.rules.push(loaderRule);
   });
   });

mix.addWebpackLoaders([ { test: /.js$/, loader: require.resolve('@open-wc/webpack-import-meta-loader'), }, ]);

But it seems to me not quite the right decision

[ctf0]

i cant really tell what is the reason behind the error, if ur finiding is working then good, if not can u redo ur setup with the demo repo & send me the repo link to test on ?