Problem getting core node api to work in an electron apps webworker

[mulgurul]

I'm struggling a bit to get webworker to work in my Electron App.
The App is build based on the ElectronReactBoilerplate template from github. It's made with typescript, commonjs mode.
I have not succeed building the App with WP 5 way of bundling webworker. But after a lot of struggling i got it working with a variation from this article: https://dannadori.medium.com/how-to-bundle-webworker-in-npm-package-620dcec922e1.
Now I have a ultra simple packed webworker running, and it's working both in dev and prod/package mode.
So now I started adding my functionality, and here new problems arise. I need a dgram socket in the worker and just adding an import dgram from 'dgram and a reference: 'let udpSocket = dgram.createSocket('udp4');' result in webpack errors when running dev packing: Module not found: Error: Can't resolve 'dgram' in '...worker.ts'
I have this working perfectly in a Electron Fiddle in pure javascript.
Something suggest that webpack is not adding the core node modules. I have tried removing the 'web' part from targets (''target: ['electron-renderer', 'web'],) but this brings another runtime error about global not defined in my renderer console.
I'm wondering if I need to do a separate bundle for the webworker?

Can anyone help with some suggestions to get around this?

Heres my full webpack config:

import 'webpack-dev-server';
import path from 'path';
import fs from 'fs';
import webpack from 'webpack';
import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import chalk from 'chalk';
import { merge } from 'webpack-merge';
import { execSync, spawn } from 'child_process';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import baseConfig from './webpack.config.base';
import webpackPaths from './webpack.paths';
import checkNodeEnv from '../scripts/check-node-env';

// When an ESLint server is running, we can't set the NODE_ENV so we'll check if it's
// at the dev webpack config is not accidentally run in a production environment
if (process.env.NODE_ENV === 'production') {
  checkNodeEnv('development');
}

const port = process.env.PORT || 1212;
const manifest = path.resolve(webpackPaths.dllPath, 'renderer.json');
const skipDLLs =
  module.parent?.filename.includes('webpack.config.renderer.dev.dll') ||
  module.parent?.filename.includes('webpack.config.eslint');

/**
 * Warn if the DLL is not built
 */
if (
  !skipDLLs &&
  !(fs.existsSync(webpackPaths.dllPath) && fs.existsSync(manifest))
) {
  console.log(
    chalk.black.bgYellow.bold(
      'The DLL files are missing. Sit back while we build them for you with "npm run build-dll"'
    )
  );
  execSync('npm run postinstall');
}

const configuration: webpack.Configuration = {
  devtool: 'inline-source-map',

  mode: 'development',

  target: ['web', 'electron-renderer'],

  entry: {
    mainWindow: [
      `webpack-dev-server/client?http://localhost:${port}/dist`,
      'webpack/hot/only-dev-server',
      path.join(webpackPaths.srcRendererPath, 'index.tsx'),
    ],
    workerWindow: [
      `webpack-dev-server/client?http://localhost:${port}/dist`,
      'webpack/hot/only-dev-server',
      path.join(webpackPaths.srcWorkerPath, 'bgindex.tsx'),
    ]},

  output: {
    path: webpackPaths.distRendererPath,
    publicPath: '/',
    filename: '[name].renderer.dev.js',
    library: {
      type: 'umd',
    },
  },


  module: {
    rules: [
      // {
      //   test: /worker\.js$/i,
      //   loader: "worker-loader",
      //   options: {
      //       inline: "no-fallback"
      //   },
      // },
      { test: /worker\.ts$/, loader: 'ts-loader' },
      {
        test: /\.s?(c|a)ss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
            },
          },
          'sass-loader',
        ],
        include: /\.module\.s?(c|a)ss$/,
      },
      {
        test: /\.s?css$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        exclude: /\.module\.s?(c|a)ss$/,
      },
      // Fonts
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      // Images
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      // SVG
      {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              prettier: false,
              svgo: false,
              svgoConfig: {
                plugins: [{ removeViewBox: false }],
              },
              titleProp: true,
              ref: true,
            },
          },
          'file-loader',
        ],
      },
    ],
  },
  plugins: [
    ...(skipDLLs
      ? []
      : [
          new webpack.DllReferencePlugin({
            context: webpackPaths.dllPath,
            manifest: require(manifest),
            sourceType: 'var',
          }),
        ]),

    new webpack.NoEmitOnErrorsPlugin(),
    new NodePolyfillPlugin(),

    /**
     * Create global constants which can be configured at compile time.
     *
     * Useful for allowing different behaviour between development builds and
     * release builds
     *
     * NODE_ENV should be production so that modules do not perform certain
     * development checks
     *
     * By default, use 'development' as NODE_ENV. This can be overriden with
     * 'staging', for example, by changing the ENV variables in the npm scripts
     */
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),

    new webpack.LoaderOptionsPlugin({
      debug: true,
    }),

    new ReactRefreshWebpackPlugin(),

    new HtmlWebpackPlugin({
      filename: path.join('index.html'),
      template: path.join(webpackPaths.srcRendererPath, 'index.ejs'),
      chunks: ['mainWindow'],
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true,
      },
      isBrowser: false,
      env: process.env.NODE_ENV,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: webpackPaths.appNodeModulesPath,
    }),

    new HtmlWebpackPlugin({
      filename: path.join('bgindex.html'),
      template: path.join(webpackPaths.srcWorkerPath, 'bgindex.ejs'),
      chunks: ['workerWindow'],
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true,
      },
      isBrowser: false,
      env: process.env.NODE_ENV,
      isDevelopment: process.env.NODE_ENV !== 'production',
      nodeModules: webpackPaths.appNodeModulesPath,
    }),
  ],

  stats: {
    children: true,
  },

  node: {
    __dirname: false,
    __filename: false,
  },

  devServer: {
    port,
    compress: true,
    hot: true,
    headers: { 'Access-Control-Allow-Origin': '*' },
    static: {
      publicPath: '/',
    },
    historyApiFallback: {
      verbose: true,
    },
    setupMiddlewares(middlewares) {
      console.log('Starting preload.js builder...');
      const typeSettingMiddleware = function(req, res, next) {
        if (req.originalUrl.endsWith('.ts')) {
          res.setHeader('Content-Type', 'application/javascript');
        }
        next();
      };
      middlewares.unshift(typeSettingMiddleware);
      const preloadProcess = spawn('npm', ['run', 'start:preload'], {
        shell: true,
        stdio: 'inherit',
      })
        .on('close', (code: number) => process.exit(code!))
        .on('error', (spawnError) => console.error(spawnError));

      console.log('Starting Main Process...');
      let args = ['run', 'start:main'];
      if (process.env.MAIN_ARGS) {
        args = args.concat(
          ['--', ...process.env.MAIN_ARGS.matchAll(/"[^"]+"|[^\s"]+/g)].flat()
        );
      }
      spawn('npm', args, {
        shell: true,
        stdio: 'inherit',
      })
        .on('close', (code: number) => {
          preloadProcess.kill();
          process.exit(code!);
        })
        .on('error', (spawnError) => console.error(spawnError));
      return middlewares;
    },
  },
};

export default merge(baseConfig, configuration);

[alexander-akait]

Sorry for delay, sounds like a bug, can you create reproducible test repo to investigate it better, thank you

[mulgurul]

By the way, I'm using
webPreferences: { nodeIntegration: true, ... nodeIntegrationInWorker: true, ...
In main when spinning up my BrowserWindow

[alexander-akait]

Yes, please create reproducible test repo, I will look deeply into this, because it should work

[mulgurul]

Hi Alexander, sorry for the long delay. Finally I got the time to do a repro: https://github.com/mulgurul/ErbWithWebWorker/tree/WithWebWorkerOkButNoNode
I think this must have something to do with the issues mentioned here: https://stackoverflow.com/questions/57774039/how-to-import-a-node-module-inside-an-angular-web-worker
It might be that the worker-loader is running in its own isolated configuration and some extra config is needed to make it include Node lib. like:
let workerPlugin = config.plugins.find(p => p instanceof WorkerPlugin); if (workerPlugin) { workerPlugin.options.plugins.push(new NodeTargetPlugin()); }
But unfortunately I dont know how to configure this in the ERB webpack script setup. Maybe you can see quickly what needs to be done. The repro by the way is still using worker-loader as I haven't found a good solution to make clean WP 5 work with TS and electron.
BR from Peter

[mulgurul]

Can anyone from the team please help? Thanks

[alexander-akait]

Sorry for delay, I will look soon

[mulgurul]

[like] Peter Meldgaard reacted to your message:

…

________________________________ From: Alexander Akait ***@***.***> Sent: Thursday, March 7, 2024 2:33:50 PM To: webpack/webpack ***@***.***> Cc: Peter Meldgaard ***@***.***>; Author ***@***.***> Subject: Re: [webpack/webpack] Problem getting core node api to work in an electron apps webworker (Discussion #17999) Sorry for delay, I will look soon — Reply to this email directly, view it on GitHub<#17999 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABMIZXXMAW4HYVSO7ZHNI2LYXB3E5AVCNFSM6AAAAABCIO4TQOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DOMBYGI4TS>. You are receiving this because you authored the thread.Message ID: ***@***.***>