Worker with webpack and VUe 2 - WEBPACK_IMPORTED_MODULE resources_workerd default.a is not a constructor

Question

I'm trying to use Workers in a Vue project. I'm using webpack and worker-loader package for load a local worker file.

I am using that versions:

- "vue": "^2.5.11",
- "webpack": "^3.6.0"
- "worker-loader": "^3.0.8"

As documentation explain, in my webpack-config I added:

{
    test: /\.worker\.js$/,
    use: { loader: 'worker-loader' }
}

and here a fragment of my code

......
import Worker from '../resources/worker'
const worker = new Worker();
worker.postMessage({ action: 'compress', data: 'aaaaaa' });
worker.addEventListener("message", function (event) {
    console.log('--------------------');
});
......

On line "const worker = new Worker()" I get the next error

__WEBPACK_IMPORTED_MODULE_10__resources_worker___default.a is not a constructor

Somebody can help me to load a local worker file?

Thanks in advance

Answer 1

I can solve this issue upgrading some project packages

"vue": "^2.7.8",
"vue-loader": "^14.2.2",
"vue-template-compiler": "^2.7.8",
"webpack": "^4.46.0",
"webpack-cli": "^4.10.0",

and modified wepack config for use Worker inline

{
    test: /\.worker\.(c|m)?js$/i,
    // test: /\.worker\.js$/,
    loader: 'worker-loader',
    options: {
        inline: 'fallback',
        publicPath: 'your url',
    },
},

With this configuration, it's created a separated worker js file in your public path, which is loaded when "new Worker()" it's called