ERROR in Invalid value used in weak set against webpack v5
Closed this issue · 2 comments
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
> buckaroo@0.7.5-test 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
> buckaroo@0.7.5-test 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
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.
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