rspack
rspack copied to clipboard
[Bug]: Cannot read properties of undefined (reading 'tap ') CommonJsChunkFormatPlugin.js (HtmlWebpackPlugin)
System Info
System: OS: macOS 14.6.1 CPU: (10) arm64 Apple M2 Pro Memory: 104.19 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node Yarn: 1.22.21 - ~/.nvm/versions/node/v20.10.0/bin/yarn npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm Browsers: Chrome: 129.0.6668.70 Safari: 17.6 npmPackages: @rspack/cli: ^1.0.7 => 1.0.7 @rspack/core: ^1.0.7 => 1.0.7
Details
Error: × TypeError: Cannot read properties of undefined (reading 'tap ')
│ │ at Object.fn (/node_modules/webpack/lib/javascript/CommonJsChunkFormatPlugin.js:34:58)
│ │ at SyncHook.callAsyncStageRange (/node_modules/@rspack/lite-tapable/dist/index.js:240:21)
│ │ at SyncHook.callStageRange (/node_modules/@rspack/lite-tapable/dist/index.js:259:14)
│ │ at QueriedHook.call (/node_modules/@rspack/lite-tapable/dist/index.js:218:26)
│ │ at /node_modules/ @rspack/core/dist/Compiler.js:568:21
│ │ at last.function (//node_modules/@rspack/core/dist/Compiler.js:848:28)
rspack.config.js
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const rspack = require('@rspack/core');
const mode = process.env.NODE_ENV || 'production';
const isProduction = mode === 'production';
const config = {
devServer: {
historyApiFallback: true,
static: {
directory: path.join(__dirname, 'src', 'build', 'out'),
},
port: 9000,
host: '0.0.0.0',
client: {
overlay: false,
},
hot: true,
},
mode,
output: {
publicPath: '/',
// filename: '[name].[hash].bundle.js',
chunkFilename: '[name].[hash].bundle.js',
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
],
},
{
test: /\.(ts|tsx)$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(woff(2)?|ttf|eot|svg|jpg|md|png|html)(\?v=\d+\.\d+\.\d+)?$/,
exclude: /src/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'resources/',
publicPath: '/resources/',
},
}],
},
].filter(Boolean),
},
plugins: [
new MomentLocalesPlugin({
localesToKeep: ['es-us', 'ru'],
}),
new ForkTsCheckerWebpackPlugin({}),
new CompressionPlugin(),
],
optimization: {
usedExports: isProduction,
},
devtool: isProduction ? undefined : 'inline-source-map',
};
module.exports = config;
rspack.desktop.config.js
const { merge } = require('webpack-merge');
const path = require('path');
const rspack = require('@rspack/core');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const commonConfig = require('./rspack.config');
const environment = require('./env');
module.exports = merge(commonConfig, {
devServer: {
port: 9090,
},
output: {
path: path.resolve(__dirname, './build/desktop/out/'),
filename: pathData => (pathData.chunk.name === 'sw' ? '[name].js' : '[name].[hash].js'),
globalObject: 'this',
},
entry: {
index: path.resolve('./src/desktop/index.tsx'),
sw: path.resolve('./src/desktop/sw/index.ts'),
},
plugins: [
new HtmlWebPackPlugin({
title: 'УЮТ Система',
template: 'src/desktop/index.html',
favicon: 'resources/favicon.ico',
excludeChunks: ['sw'],
}),
...environment.locations
.filter(env => env.type === 'desktop')
.map(env => (
new WebpackPwaManifest({
name: `${env.label} - Уют в вашем доме`,
description: '',
short_name: `${env.label} - УЮТ Система`,
start_url: '.',
display: 'standalone',
orientation: 'any',
prefer_related_applications: false,
icons: [
{
src: path.resolve(__dirname, './resources/android-icon-36x36.png'),
size: 36,
},
{
src: path.resolve(__dirname, './resources/android-icon-48x48.png'),
size: 48,
},
{
src: path.resolve(__dirname, './resources/android-icon-72x72.png'),
size: 72,
},
{
src: path.resolve(__dirname, './resources/android-icon-96x96.png'),
size: 96,
},
{
src: path.resolve(__dirname, './resources/android-icon-144x144.png'),
size: 144,
},
{
src: path.resolve(__dirname, './resources/android-icon-192x192.png'),
size: 192,
},
],
})
)),
new rspack.EnvironmentPlugin({
'process.env.DEVICE_ENV': 'desktop',
'process.env.APPLICATION_ENV': JSON.stringify(JSON.stringify(environment)),
}),
],
});
Reproduce link
No response
Reproduce Steps
npm run rspack serve rspack.desktop.config.js
It seems that an incompatible plugin internally introduced webpack's CommonJsChunkFormatPlugin. The rspack's CommonJsChunkFormatPlugin should be used instead. Can you provide a repro?
Hello @Mozzarella123, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.
Since the issue was labeled with need reproduction, but no response in 14 days. This issue will be closed. Feel free to comment and reopen it if you have any further questions.