Web workers don't work

Describe the bug Web workers don’t work, I get the following error:

testWorker.js:1       
Uncaught SyntaxError: Unexpected token <

When I click on the error, I see the code from the index.html for some reason:

structure

App.vue
workers
|_ testWorker.js

App.vue

mounted() {
  let testWorker = new Worker('workers/testWorker.js')
  testWorker.postMessage('message from App.vue')
  testWorker.addEventListener("message", (event) => {
    console.log("Received data from worker:", event)
  })
}

testWorker.js

onmessage = function (event) {
  postMessage({ result: 'Reply from worker' })
}

Environment:

• OS and version: win10
• vue-cli-plugin-electron-builder version : 1.4.0
• electron version: 6.0.7

[alexhx5]

Never mind. I figured out how to make it work. For anyone else having troubles with this, here’s what I did:

1. Install worker-loader:

yarn add -D worker-loader

1. Add the following in your vue.config.js:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.worker\.js$/,
          use: { loader: 'worker-loader' }
        }
      ]
    }
    ...

1. In your background.js (main Electron file), inside webPreferences: {} of the window, add nodeIntegrationInWorker: true if you want to be able to use Node’s modules inside the worker. Create a worker file (e.g. workers/worker1.js) and create a listener in there, here’s some example:

const path = require('path')

// Listen to messages from parent thread
self.addEventListener('message', (event) => {
  console.log('Worker received message:', event.data)
  // Do some calculations and send the result back to parent thread
  let parsedPath = path.parse('C:/test')
  self.postMessage({result: parsedPath})
})

1. Import and init the worker where you need it:

<script>
import Worker1 from 'worker-loader!../workers/worker1'
let worker = new Worker1()
...
mounted() {
  worker.addEventListener("message", function (event) {
    console.log('Received data from worker:', event.data)
  })
}
...
methods: {
  someMethod() {
    // Send some message to the worker
    worker.postMessage({parse: 'C:/test'})
  }
}

---

Notes: Don’t try to use node’s native worker_threads, they don’t work in Electron

Tags for people who’s trying to find it:

• Web worker Module not found: Error: Can’t resolve
• Webpack electron-builder web worker doesn’t work
• How to use modules inside web worker in electron webpack

[nklayman]

Thanks for providing such a detailed guide! I will link to this in the docs when I get the chance.