Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Electron & Webpack 5 - worker bundles created in Production build #48

Open
dulu93 opened this issue Sep 23, 2022 · 0 comments
Open

Electron & Webpack 5 - worker bundles created in Production build #48

dulu93 opened this issue Sep 23, 2022 · 0 comments

Comments

@dulu93
Copy link

dulu93 commented Sep 23, 2022

Hi, I have been having some trouble getting threads & threads-plugin to properly work with electron.
I have used it before on a react web app and had no issues, but its not the case for the electorn app.

I have been following the setup documentation, but I seem to have missed something at some point.

Everything is working fine in dev mode but as soon as I build a debian package, install and start it, the workers are not accessible and I get the following error message

Cannot find module '/opt/FormicaConnect/resources/app.asar/dist/main/workers/runAction.ts'
Require stack:
- /opt/FormicaConnect/resources/app.asar/dist/main/main.js

Im pretty sure its because the workers are not bundled into own files, like they did on my web version.

My plan is to spawn workers on electrons background process, which is running nodejs.

await spawn<RunAction>(new Worker('./workers/runAction.ts'));

funny thing is that wepack only creates worker bundles when the workers are spawned with the following code:

await spawn<RunAction>(new Worker(new URL('./workers/runAction.ts', import.meta.url)));

but then again its not working either in dev mode or production mode. in production mode it would complain that runAction.ts has no access to packages like electron-fetch.

I know I have to add the worker bundles to the "asarUnpack" option in my package.json, but the workers are not being bundled in the first place.

Any ideas what I might have missed? Help would be much appreciated.

Heres some example code:

runAction.ts:

import { expose } from 'threads/worker';
import fetch, { HeadersInit } from 'electron-fetch';

export type RunAction = (url: string, method: string, headers: HeadersInit, body: string) => Promise<string>;

expose(async function runAction(url: string, method: string, headers: HeadersInit, body: string): Promise<string> {
  const response = await fetch(url, { method, redirect: 'follow', headers, body });

  return response.text();
});

how I spawn the worker:
await spawn<RunAction>(new Worker('./workers/runAction.ts'));

webpack.config.base.ts:

//Base webpack config used across other specific configs

import webpack from 'webpack';
import webpackPaths from './webpack.paths';
import { dependencies as externals } from '../../release/app/package.json';

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const ThreadsPlugin = require('threads-plugin');

const configuration: webpack.Configuration = {
    externals: [...Object.keys(externals || {})],

    stats: 'errors-only',
    module: {
        rules: [

            {
                // test: /\.[jt]sx?$/,
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'ts-loader',
                    options: {
                        // Remove this line to enable type checking in webpack builds
                        transpileOnly: true,
                        compilerOptions: {
                            module: 'esnext',
                        },
                    },
                },
            },
        ],
    },

    output: {
        path: webpackPaths.srcPath,
        // https://github.com/webpack/webpack/issues/1114
        library: {
            type: 'commonjs2',
        },
    },

    /**
     * Determine the array of extensions that should be used to resolve modules.
     */
    resolve: {
        fallback: { path: false, fs: false },
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
        modules: [webpackPaths.srcPath, 'node_modules'],
    },

    plugins: [
        new ThreadsPlugin(),
        new webpack.EnvironmentPlugin({
            NODE_ENV: 'production',
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(
                        process.cwd(),
                        './node_modules/sql.js/dist/sql-wasm.js'
                    ),
                    to: webpackPaths.dist,
                },
            ],
        }),
    ],
};

export default configuration;
the build commands I use:
`"build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
"build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
"package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
Versions used:
- threads: 1.7.0
- threads-plugin: 1.4.0
- node: v16
- webpack: 5.72.0

Please to not close this issue if I dont answer to questions directly. I might be on vacation in between.

Thanks in advance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant