GoogleChromeLabs / worker-plugin

👩‍🏭 Adds native Web Worker bundling support to Webpack.
https://npm.im/worker-plugin
Apache License 2.0
1.91k stars 79 forks source link

Vue Cli with Electron - not working #80

Closed arsh09 closed 4 years ago

arsh09 commented 4 years ago

Hello,

I am trying to use this plugin in a vue-cli-electron project.

After adding everything as par the documentation, I am getting the following error:

Capture1

I added these lines in a Vue componenet:

// App.vue

mounted(){
const piWorker = new Worker('./hardware.worker.js', { type: 'module' });
 piWorker.onmessage = event => {
 console.log('pi: ' + event.data);
 };
 piWorker.postMessage(42);
}
// hardware.worker.js

addEventListener('message', event => {
  postMessage( { results : 10 } );
});

The following is my vue.config.js. I added the rules

// vue.config.js  

var webpack = require('webpack');
const WorkerPlugin = require('worker-plugin')

module.exports = {
    chainWebpack : config =>{
      config.externals (['bindings', 'ffi', 'ref'])
    },
    pluginOptions: {
      configureWebpack : {
        module: {
          rules: [
            {test: /\.worklet\.(js|ts)x?$/,
            loader: 'worker-plugin/loader'}
          ]
        },
        plugins : [ 
          new WorkerPlugin(),
          new webpack.NormalModuleReplacementPlugin(
            /^bindings$/,
            `${__dirname}/src/bindings.js`
          ),
        ],
      },
      electronBuilder: {
        nodeIntegration: true,
        nodeIntegrationInWorker : true,
        // outputDir: 'build_exe',
        builderOptions: {
          productName: "AppName",
          extraFiles: ["dll", "worker"],
          files: []
        },
        externals: ['@saleae/ffi', 'ref'],
        nodeModulesPath: ['./node_modules']
      }
    }
  }

Looking forward for any help.

I have tried using worker-loader but with no luck. This suggested to move to worker-plugin.

arsh09 commented 4 years ago

Sorry,

it was vue config js file. I put configureWebpack under pluginOptions. Its a separate object.

Works now perfectly.