Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

support for webpack 5

See original GitHub issue

It seems that webpack 5 in production mode breaks the singleton mode (that was working fine for webpack 4). It throws an error that __webpack_exports__ is not defined . In development mode for webpack 5 everything works as expected, but only in production it generates the error. I identified that if I set in webpack optimization usedExports: false then the issue is resolved (however that is an undesirable option).

This is the config for webpack:

module.exports = merge(baseConfig, {
  target: 'electron-renderer',
  entry: {
    app: './src/client/app.tsx',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            babelrc: true,
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(gif|png|jpe?g)$/,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
            },
          },
        ],
      },
      {
        test: /\.svg$/,
        use: ['svg-inline-loader?classPrefix'],
      },
      {
        test: /\.md$/i,
        use: ['raw-loader'],
      },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {
        enforce: 'pre',
        test: /\.js$/,
        use: ['source-map-loader'],
      },
      {
        test: /\.worker\.ts$/i,
        use: [
          {
            loader: 'comlink-loader',
            options: {
              singleton: true,
            },
          },
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              babelrc: true,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      typescript: {
        diagnosticOptions: {
          semantic: true,
          syntactic: true,
        },
      },
    }),
    new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src/client/index.html') }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.STORE': JSON.stringify(process.env.STORE || ''),
    }),
    new CopyPlugin({
      patterns: [{ from: path.resolve(__dirname, 'static/'), to: path.resolve(__dirname, 'dist', 'static') }],
    }),
  ],
});

This is the babel config:

module.exports = (api) => {
  // This caches the Babel config by environment.
  api.cache.using(() => process.env.NODE_ENV);
  const developmentPlugins = ['@babel/plugin-transform-runtime', 'react-refresh/babel'];

  const productionPlugins = [
    // babel-preset-react-optimize
    '@babel/plugin-transform-react-constant-elements',
    '@babel/plugin-transform-react-inline-elements',
    'babel-plugin-transform-react-remove-prop-types',
  ];
  const development = api.env('development', 'test');

  return {
    presets: [
      ['@babel/preset-env', { targets: 'last 1 chrome version' }],
      '@babel/preset-typescript',
      '@babel/preset-react',
      '@emotion/babel-preset-css-prop',
    ],
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      ...(development ? developmentPlugins : productionPlugins),
    ],
  };
};

It works fine in webpack 4 (dev and prod) and only in dev mode in webpack 5. Any ideas how can we improve comlink support for webpack 5 in prod?