unable to use web-worker with node integration enabled

Describe the bug I have an Electron project in typescript, with webpack and of course - with vue-cli-plugin-electron-builder.

Im trying to add a new web worker to my project and Im having a hard time making everything work as expected. The web worker is written in TS, it should handle some long tasks in the background in order to let the UI thread run smooth.

I followed the guide in the documentation to use worker-plugin, but I’m getting the following error:

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                                                                                                                        9:49:05 PM

 error  in ./src/app/workers/my-worker.ts

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve 'child_process' in '/Users/dev/workspaces/electron-project/src/shared'


 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/app/App.vue?vue&type=script&lang=js& 1:0-114
 @ ./src/app/App.vue?vue&type=script&lang=js&
 @ ./src/app/App.vue
 @ ./src/app/main-router.js
 @ ./src/app/main.js

Basically my webworker imports a file that use some nodeJS modules like path, fs and child_process, but it fails there. (there was also a weird prettier error when I tried to use worker-plugin, but I think it’s a non related issue with the worker plugin itself).

Before trying to use worker-plugin I also tried to use worker-loader, there I was able to use the nodejs modules but whenever I had an import to a 3rd party library I get another error which I couldn’t find anything relevant about how to fix it:

webpack config ( note that I tried also the commented out method here)

module.exports = {
  entry: path.resolve(rootDir, './src/app/main.js'),
  resolve: {
    extensions: ['.js', '.ts', '.vue'],
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      // {
      //   test: /\.worker\.ts$/,
      //   use: [{ loader: 'worker-plugin/loader' }],
      //   exclude: /node_modules/,
      // },
    ],
  },
  plugins: [new WorkerPlugin()],
};

relevant browserWindow config

my-worker.ts

import path from 'path';
import { convertFile } from '@/tasks/converter'; // This module imports a script that requires child_process

// Listen to messages from parent thread
addEventListener('message', async (event) => {
  console.log('Worker received message:', event.data);
  // Do some calculations and send the result back to parent thread
  const parsed = path.parse(event.data.path);
  console.log(`inside the worker:`, parsed);
  const convertedFile = await convertFile(event.data.content, convertedPath);
  // @ts-ignore
  self.postMessage({ result: convertedFile });
});

App.vue

...
          <!--Template Simple Code -->
          <h1 @click="someMethod">TestWorker</h1>
          <!--Template Simple Code -->
...
const worker = new Worker('../workers/my-worker', { type: 'module' });
...
  mounted() {
    worker.addEventListener('message', function (event) {
      console.log('Received data from worker:', event.data);
    });
  },
...
methods:{
someMethod() {
    console.log('sending to the worker');
      // Send some message to the worker
      worker.postMessage({ parse: '~/workspaces/test/file.txt' });
    },
}

dependencies

...
        "vue-cli-plugin-electron-builder": "^2.0.0-rc.6",
        "vue": "^2.6.12",
        "electron": "11.3.0",
        "electron-devtools-installer": "^3.1.1",
        "typescript": "^4.1.5",
        "ts-loader": "^8.0.17",
        "@babel/preset-typescript": "^7.12.17",
        "@typescript-eslint/eslint-plugin": "^4.15.1",
        "@typescript-eslint/parser": "^4.15.1",
        "@vue/cli-plugin-babel": "^4.5.11",
        "@vue/cli-plugin-eslint": "^4.5.11",
        "babel-eslint": "^10.1.0",
        "@vue/cli-service": "^4.5.11",
        "webpack": "^4.46.0",
        "webpack-cli": "^4.3.1",
        "worker-plugin": "^5.0.0"
        "untildify": "^4.0.0",
...

To Reproduce Steps to reproduce the behavior:

• add a short TS web-worker that use fs / path / etc.
• add workerPlugin to webpack config’s plugin
• in your background.js allow nodeIntegration + nodeIntegrationInWorker
• import the worker and call it from your App.vue

Expected behavior The worker should be accessible from the app 😄

Environment (please complete the following information):

• custom config for vcp-electron-builder: Im using typescript in the project, enabling nodeIntegration and nodeIntegrationInWorker:

electronBuilder: {
  outputDir: electronOutputDir,
  mainProcessFile: 'src/app/background.js',
  mainProcessTypeChecking: false, 
  pages: {
    index: path.join(__dirname, './src/app/main.js'),
  },
  chainWebpackMainProcess: (config) => {
    for (const [key, value] of Object.entries(appWebpackConfig.resolve.alias)) {
      config.resolve.alias.set(key, value);
    }
  },
  nodeIntegration: true,
  nodeIntegrationInWorker: true,
...

btw - this plugin is awesome 😎

[arsh09]

@edenhermelin

It is okay. I found out that it is impossible to use node native modules in web workers if I call them in a front end process. I ended up using Electron IPC and spawning a new process which calls the DLL function instead.

Thank you though.

Cheers

[edenhermelin]

Hi @arsh09 , sorry for the late response.

I’m not familiar with ref/ffi, but from reading a little about it - it looks like it’s using nativee modules (like @nklayman explained in a previous comment).

What I managed to do is to get a web worker working with fs / path, etc, but I didn’t use in my project any native modules of nodeJS.