How to bundle worker_thread dependencies with webpack

Question

I'm writing an electron application that uses electron forge for setup and configuration. The project uses Webpack 5 as a bundler and typescript as the development language. I'm having trouble running a worker_thread on the main-thread.

It all works fine, as long as the worker_thread does not use any imported local modules. But when I import modules they can't be found. I'm thinking this is because webpack doesn't bundle the dependencies from the worker.

My code looks like this:

index.ts (electron main thread):

ipcMain.handle('export', async (event, measurements: Measurement[], options: ExportOptions) => {
    return new Promise((resolve, reject) => {
        const worker = new Worker(new URL('./export.worker.js', import.meta.url))
        worker.on('message', resolve)
        worker.on('error', reject)
        worker.postMessage({
            measurements,
            options,
        })
    })
})

export.worker.js (same folder as main.ts):

const { parentPort } = require('worker_threads')
const { Export } = require('../preload/export')

parentPort.on('message', async (data) => {
    const { measurements, options } = data
    await Export.export(measurements, options)
    parentPort.close()
})

When I try to run this I get:

Error occurred in handler for 'export': Error: Cannot find module '../preload/export'
Require stack:
- C:\Development\spectro-demo\internal-client\.webpack\main\a3142abb2db60e4fab06.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:892:15)
    at Function.Module._load (internal/modules/cjs/loader.js:737:27)
    at Module.require (internal/modules/cjs/loader.js:964:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\Development\spectro-demo\internal-client\.webpack\main\a3142abb2db60e4fab06.js:2:20)
    at Module._compile (internal/modules/cjs/loader.js:1083:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1113:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Function.Module._load (internal/modules/cjs/loader.js:781:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Development\\spectro-demo\\internal-client\\.webpack\\main\\a3142abb2db60e4fab06.js'
  ]
}

So I'm wondering: How can I use worker_threads that reference modules in my project?

Answer 1

I was able to fix it. Seems to be a bug in webpack 5. See this repo for a workaround: https://github.com/DustinJSilk/web-worker-ts-webpack-test