webpackvuejs2workerworker-loader

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


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


Solution

  • 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