ERROR in Invalid value used in weak set against webpack v5

[paddymul]

Bug report

I get an ERROR in Invalid value used in weak set when running npm run build

I have looked at the previous bug reports related to this error, and all were tied in some way to webpack v4. even after updating to webpack v5, I see the same weak set error.

Actual Behavior

Expected Behavior

Here is a shell output from running build

time npm run clean && npm run build

> [email protected] clean
> rimraf dist && yarn run clean:lib && yarn run clean:labextension && yarn run clean:nbextension

yarn run v1.22.19
$ rimraf lib
✨  Done in 0.31s.
yarn run v1.22.19
$ rimraf buckaroo/labextension
✨  Done in 0.31s.
yarn run v1.22.19
$ rimraf buckaroo/nbextension/index.*
✨  Done in 0.28s.
npm run clean  0.76s user 0.20s system 60% cpu 1.596 total

> [email protected] build
> yarn run build:lib && yarn run build:nbextension && yarn run build:labextension

yarn run v1.22.19
$ tsc 
✨  Done in 2.61s.
yarn run v1.22.19
$ webpack --mode=production --no-devtool
assets by status 0 bytes [cached] 1 asset

ERROR in Invalid value used in weak set

webpack 5.91.0 compiled with 1 error in 83 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

How Do We Reproduce?

git clone https://github.com/paddymul/buckaroo.git
git checkout chore/fix-codepen
yarn install
yarn run build

Note this is a relatively complex project that builds a jupyterlab extension with typescript and react.
jupyterlab uses module federation. I don't think that is the source of the problem

How I got here

My build works on main, but I'm currently trying to tweak my build so that the npm module works as a standalone in codepen. The project has a whole interactive docs section https://buckaroo-data.readthedocs.io/en/latest/examples/#/DFViewerEx_large that I have been updating.

The edit on codepen buton fails in docs fail because skypack.dev can't import the css file from main. I am trying to fix that bug. I am also experimenting with jsdelivr and esm.sh

My branch where I'm trying to make this work is here:
paddymul/buckaroo#294

Please paste the results of npx webpack-cli info here, and mention other relevant information

Here are the results from webpack-cli info

(buckaroo-dev-8) paddy@Paddys-Air buckaroo % npx webpack-cli info
npx webpack-cli info

  System:
    OS: macOS 13.6.1
    CPU: (8) arm64 Apple M1
    Memory: 70.80 MB / 16.00 GB
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 129.0.6668.100
    Safari: 16.6
  Packages:
    css-loader: ^5.0.0 => 5.2.7 
    fork-ts-checker-webpack-plugin: ^6.1.0 => 6.5.3 
    html-loader: ^2.1.2 => 2.1.2 
    html-webpack-plugin: ^5.0.0 => 5.6.0 
    markdown-loader: ^7.0.0 => 7.0.0 
    postcss-loader: ^7.0.1 => 7.3.4 
    raw-loader: ^4.0.2 => 4.0.2 
    sass-loader: ^13.0.2 => 13.3.3 
    source-map-loader: ^0.2.4 => 0.2.4 
    style-loader: ^2.0.0 => 2.0.0 
    svg-url-loader: ^7.1.1 => 7.1.1 
    ts-loader: ^8.0.14 => 8.4.0 
    tsconfig-paths-webpack-plugin: ^3.3.0 => 3.5.2 
    url-loader: ^4.1.0 => 4.1.1 
    webpack: ^5 => 5.91.0 
    webpack-cli: ^5 => 5.1.4 
    webpack-dev-server: ^5 => 5.1.0 

[paddymul]

I updated my branch ( 1e7cfa0effef ). now you can just run
yarn webpack --config ./webpack.config.js --mode=development
and you get this error

asset index.js 99 bytes [compared for emit] (name: main)

ERROR in Invalid value used in weak set

webpack 5.91.0 compiled with 1 error in 26 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[alexander-akait]

The problem is here - https://github.com/paddymul/buckaroo/blob/chore/fix-codepen/webpack.config.js#L61, you are using the mini-css-extract-plugin plugin as the resolver plugin, but it is just a regular plugin

Here how to fix:

const path = require('path');
const version = require('./package.json').version;
//import {TsconfigPathsPlugin} from 'tsconfig-paths-webpack-plugin';
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

//import HtmlWebpackPlugin from 'html-webpack-plugin';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const luminoThemeImages = /^.*@lumino\/default-theme.*.png$/;

const crypto = require('crypto');

// Workaround for loaders using "md4" by default, which is not supported in FIPS-compliant OpenSSL
const cryptoOrigCreateHash = crypto.createHash;
crypto.createHash = (algorithm) =>
  cryptoOrigCreateHash(algorithm == 'md4' ? 'sha256' : algorithm);

const performance = {
  maxAssetSize: 100_000_000,
};

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
// Custom webpack rules
const rules = [
  { test: /\.tsx?$/, loader: 'ts-loader' },
  { test: /\.js$/, loader: 'source-map-loader' },
  { test: /\.css$/, use: ['style-loader', 'css-loader'] },
  {
    test: luminoThemeImages,
    issuer: /\.css$/,
    use: {
      loader: 'url-loader',
    },
  },
  {
    test: /\.(jpg|png|gif|woff|woff2)$/,
    exclude: luminoThemeImages,
    use: ['file-loader'],
  },
  {
    test: /\.md$/,
    use: ['html-loader', 'markdown-loader'],
  },
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    issuer: /\.css$/,
    use: {
      loader: 'svg-url-loader',
      options: { encoding: 'none', limit: 10000 },
    },
  },
];


// Packages that shouldn't be bundled but loaded at runtime
const externals = ['@jupyter-widgets/base'];

const resolve = {
  // Add '.ts' and '.tsx' as resolvable extensions.
  extensions: ['.webpack.js', '.web.js', '.ts', '.js', '.tsx'],
  plugins: [new TsconfigPathsPlugin()],
  fallback: { crypto: false },
};

module.exports = [
  /**
   * Embeddable buckaroo bundle
   *
   * This bundle is almost identical to the notebook extension bundle. The only
   * difference is in the configuration of the webpack public path for the
   * static assets.
   *
   * The target bundle is always `dist/index.js`, which is the path required by
   * the custom widget embedder.
   */
  {
    entry: './js/index.ts',
    output: {
      filename: 'index.js',
      path: path.resolve(__dirname, 'dist'),
      libraryTarget: 'amd',
      library: 'buckaroo',
      publicPath: 'https://unpkg.com/buckaroo@' + version + '/dist/',
    },
    devtool: 'source-map',
    module: {
      rules: rules,
    },
    plugins: [
      new MiniCssExtractPlugin()
    ],
    externals,
    resolve,
    devServer: {
      port: 8030,
    },
    performance,
  },
];

Feel free to feedback