web-infra-dev
[Bug]: Cannot build under ```experiments.css = false``` with ```CssExtractRspackPlugin```
System Info
System: OS: macOS 14.0 CPU: (8) arm64 Apple M1 Memory: 174.28 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm Browsers: Chrome: 124.0.6367.79 Safari: 17.0 npmPackages: @rspack/cli: ^0.6.1 => 0.6.2 @rspack/core: ^0.6.1 => 0.6.2
Details
Hi there, I'm migrating from Webpack 4 to Rspack, hoping to extract .css into separate files, the config can be processed smoothly in development mode, but got stuck in production mode.
In production mode, the compilation process hangs indefinitely without producing any output or errors under experiments.css is false while also utilizing the CssExtractRspackPlugin.
Troubleshooting Attempts:
Setting experiments.css to true also mitigates the issue, but will get warning :
WARNING in ⚠ You can't use experiments.css and css-extract-rspack-plugin together, please set experiments.css to false
and css files are not extracted successfully.
const baseConfig = {
mode: env,
entry: resolve('./src/index.tsx'),
module: {
rules: [
{
test: /\.jsx?|tsx?$/,
exclude: /[\\/]node_modules[\\/]/,
loader: 'babel-loader',
},
isProd ? {
test: /\.less$/,
use: [
rspack.CssExtractRspackPlugin.loader,
'css-loader',
{
loader: 'less-loader',
},
},
],
} : {
test: /\.less$/,
type: 'css',
use: [
{
loader: 'less-loader',
},
},
],
},
isProd ? {
test: /\.css$/,
use: [
rspack.CssExtractRspackPlugin.loader,
'css-loader',
],
} : {
test: /\.css$/,
type: 'css',
},
],
},
output: {
filename: '[name].bundle.js',
path: resolve('./dist'),
chunkFilename: '[name].chunk.js',
publicPath: '/',
libraryTarget: 'umd',
},
optimization: {
minimize: isProd,
minimizer: [
isProd && new rspack.SwcCssMinimizerRspackPlugin(),
isProd && new rspack.SwcJsMinimizerRspackPlugin({
extractComments: false,
compress: {
drop_console: true,
},
format: {
comments: false,
},
}),
].filter(Boolean),
sideEffects: false,
usedExports: true,
chunkIds: 'deterministic',
splitChunks: {
chunks: 'all',
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|less)$/,
reuseExistingChunk: true,
},
vendors: {
name: 'vendors',
test: /[\\/]node_modules[\\/]/,
reuseExistingChunk: true,
},
},
},
},
plugins: [
!isProd && new rspack.HtmlRspackPlugin({
template: resolve('./public/index.html'),
}),
isProd && new rspack.CssExtractRspackPlugin({
filename: 'css/[name].css',
}),
new rspack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(env),
},
}),
].filter(Boolean),
experiments: {
css: !isProd, // should be closed in production mode
rspackFuture: {
newTreeshaking: true,
},
},
devtool: !isProd ? 'inline-source-map' : false,
ignoreWarnings: [/Conflicting order/, /\'~\' is deprecated/],
};
module.exports = isProd ? baseConfig : {
...baseConfig,
devServer: {
// ...
},
};
Reproduce link
No response
Reproduce Steps
Set the above code into rspack.config.js in project with react + less, then start.
sry but i failed to reproduce the issue with the configuration you provided.
i have tried 0.6.2, 0.6.3, building less from antd@4, production mode.
any luck to provide a reproduce repository?
if not, could you try to comment out less/css importing statement one by one to find out which files caused the issue?
Hello @WeizhouRen, 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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Have the same issue. When experiments.css = false and rspack.CssExtractRspackPlugin i get a hung process that overclocks my m2 processor so that I hear the sound of a fan lol.
My config for reproduction
{
name: 'modern',
entry: {
main: {
import: [
path.join(process.cwd(), 'src/index.client')
]
}
},
output: {
chunkFilename: '[name].[contenthash].js',
clean: true,
crossOriginLoading: 'anonymous',
filename: '[name].[contenthash].js',
hashDigestLength: 16,
path: getOutputPath(process.cwd()),
publicPath: '/mstatic/build/modern/'
},
mode: production ? 'production' : 'development',
target: ['web', 'es5'],
resolve: {
extensions: ['...', '.ts', '.tsx', '.js'],
alias: {
'@components': path.resolve(__dirname, './src/components/'),
'@modules': path.resolve(__dirname, './src/modules/'),
'@pages': path.resolve(__dirname, './src/pages/'),
'@utils': path.resolve(__dirname, './src/utils/'),
'@ui': path.resolve(__dirname, './src/ui/'),
'@plugins': path.resolve(__dirname, './src/plugins/'),
'@constants': path.resolve(__dirname, './src/constants/'),
'@models': path.resolve(__dirname, './src/models/'),
'@sentry-internal': false,
'@sentry/replay': false,
'@loadable/component': path.resolve(__dirname, './src/lib/loadable/component'),
'@loadable/server': path.resolve(__dirname, './src/lib/loadable/server'),
'node-fetch': false,
react: path.resolve(__dirname, './node_modules/react/'),
'react-dom': path.resolve(__dirname, './node_modules/react-dom/'),
'prop-types': path.resolve(__dirname, './node_modules/prop-types'),
'@swc/helpers': path.resolve(
require.resolve('@swc/helpers/package.json'))
}
},
module: {
rules: [
{
test: /\.js$/,
use: [{
loader: 'builtin:swc-loader',
options: {
sourceMap: true,
jsc: {
parser: {
syntax: 'ecmascript',
jsx: true
},
transform: {
react: {
pragma: 'React.createElement',
pragmaFrag: 'React.Fragment',
runtime: 'classic',
development: !production,
refresh: true
}
}
}
}
},
'source-map-loader'
],
type: 'javascript/auto'
},
{
test: /\.tsx?$/,
use: [{
loader: 'builtin:swc-loader',
options: {
sourceMap: true,
jsc: {
parser: {
syntax: 'typescript',
tsx: true
},
transform: {
react: {
pragma: 'React.createElement',
pragmaFrag: 'React.Fragment',
runtime: 'classic',
development: !production,
refresh: true
}
}
}
}
},
'source-map-loader'
],
type: 'javascript/auto'
},
{
test: /\.css$/i,
use: [
rspack.CssExtractRspackPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
localIdentContext: process.cwd(),
exportOnlyLocals: true,
namedExport: false,
localIdentName: production ? '[hash:base64:5]' : '[name]__[local]___[hash:base64:5]'
}
}
}, {
loader: 'postcss-loader',
options: {
postcssOptions: ({ resourcePath }) => {
const isUiKit = /@myto\/(core|mobile-components|web-components)/.test(resourcePath);
const common = [['autoprefixer', {
env: 'modern'
}], ['postcss-calc', {
mediaQueries: true,
selectors: true
}]];
if (isUiKit) {
return {
plugins: common
};
}
return {
plugins: [
...common,
['postcss-custom-properties', {
importFrom: [{
customProperties: generateFlatten(theme, '--theme')
}],
preserve: false,
disableDeprecationNotice: true
}]
]
};
}
}
}]
},
{
test: /\.(png|jpg|gif|webp|svg|woff|woff2|eot|ttf)$/,
type: 'asset/resource'
}
]
},
devServer: {
client: {
logging: 'error',
overlay: false
},
server: {
type: 'https',
options: {
key: fs.readFileSync('./server/cert/server.key'),
cert: fs.readFileSync('./server/cert/server.crt')
}
},
host: 'localhost',
port: 3002,
hot: false,
historyApiFallback: true
},
plugins: [
new rspack.ProgressPlugin({
prefix: 'Rspack-client'
}),
production &&
new rspack.SourceMapDevToolPlugin({
append: false,
module: false,
filename: path.relative(
getOutputPath(''),
`${getPrivatePath('')}/sourcemaps/[file].map`
)
}),
new LoadablePlugin({
outputAsset: false,
writeToDisk: {
filename: path.join(__dirname, `private/modern`)
}
}),
new CSSOWebpackPlugin({
comments: false
}),
/*
new RspackManifestPlugin({
writeToFileEmit: true,
fileName: `${getPrivatePath(process.cwd())}/manifest.json`
}),
*/
new rspack.ProvidePlugin({
process: 'process/browser'
}),
new rspack.DefinePlugin(projectClientDefines),
new rspack.CssExtractRspackPlugin()
].filter(Boolean),
experiments: {
css: false
}
Have the same issue. When
experiments.css = falseandrspack.CssExtractRspackPlugini get a hung process that overclocks my m2 processor so that I hear the sound of a fan lol.My config for reproduction
{ name: 'modern', entry: { main: { import: [ path.join(process.cwd(), 'src/index.client') ] } }, output: { chunkFilename: '[name].[contenthash].js', clean: true, crossOriginLoading: 'anonymous', filename: '[name].[contenthash].js', hashDigestLength: 16, path: getOutputPath(process.cwd()), publicPath: '/mstatic/build/modern/' }, mode: production ? 'production' : 'development', target: ['web', 'es5'], resolve: { extensions: ['...', '.ts', '.tsx', '.js'], alias: { '@components': path.resolve(__dirname, './src/components/'), '@modules': path.resolve(__dirname, './src/modules/'), '@pages': path.resolve(__dirname, './src/pages/'), '@utils': path.resolve(__dirname, './src/utils/'), '@ui': path.resolve(__dirname, './src/ui/'), '@plugins': path.resolve(__dirname, './src/plugins/'), '@constants': path.resolve(__dirname, './src/constants/'), '@models': path.resolve(__dirname, './src/models/'), '@sentry-internal': false, '@sentry/replay': false, '@loadable/component': path.resolve(__dirname, './src/lib/loadable/component'), '@loadable/server': path.resolve(__dirname, './src/lib/loadable/server'), 'node-fetch': false, react: path.resolve(__dirname, './node_modules/react/'), 'react-dom': path.resolve(__dirname, './node_modules/react-dom/'), 'prop-types': path.resolve(__dirname, './node_modules/prop-types'), '@swc/helpers': path.resolve( require.resolve('@swc/helpers/package.json')) } }, module: { rules: [ { test: /\.js$/, use: [{ loader: 'builtin:swc-loader', options: { sourceMap: true, jsc: { parser: { syntax: 'ecmascript', jsx: true }, transform: { react: { pragma: 'React.createElement', pragmaFrag: 'React.Fragment', runtime: 'classic', development: !production, refresh: true } } } } }, 'source-map-loader' ], type: 'javascript/auto' }, { test: /\.tsx?$/, use: [{ loader: 'builtin:swc-loader', options: { sourceMap: true, jsc: { parser: { syntax: 'typescript', tsx: true }, transform: { react: { pragma: 'React.createElement', pragmaFrag: 'React.Fragment', runtime: 'classic', development: !production, refresh: true } } } } }, 'source-map-loader' ], type: 'javascript/auto' }, { test: /\.css$/i, use: [ rspack.CssExtractRspackPlugin.loader, { loader: 'css-loader', options: { modules: { localIdentContext: process.cwd(), exportOnlyLocals: true, namedExport: false, localIdentName: production ? '[hash:base64:5]' : '[name]__[local]___[hash:base64:5]' } } }, { loader: 'postcss-loader', options: { postcssOptions: ({ resourcePath }) => { const isUiKit = /@myto\/(core|mobile-components|web-components)/.test(resourcePath); const common = [['autoprefixer', { env: 'modern' }], ['postcss-calc', { mediaQueries: true, selectors: true }]]; if (isUiKit) { return { plugins: common }; } return { plugins: [ ...common, ['postcss-custom-properties', { importFrom: [{ customProperties: generateFlatten(theme, '--theme') }], preserve: false, disableDeprecationNotice: true }] ] }; } } }] }, { test: /\.(png|jpg|gif|webp|svg|woff|woff2|eot|ttf)$/, type: 'asset/resource' } ] }, devServer: { client: { logging: 'error', overlay: false }, server: { type: 'https', options: { key: fs.readFileSync('./server/cert/server.key'), cert: fs.readFileSync('./server/cert/server.crt') } }, host: 'localhost', port: 3002, hot: false, historyApiFallback: true }, plugins: [ new rspack.ProgressPlugin({ prefix: 'Rspack-client' }), production && new rspack.SourceMapDevToolPlugin({ append: false, module: false, filename: path.relative( getOutputPath(''), `${getPrivatePath('')}/sourcemaps/[file].map` ) }), new LoadablePlugin({ outputAsset: false, writeToDisk: { filename: path.join(__dirname, `private/modern`) } }), new CSSOWebpackPlugin({ comments: false }), /* new RspackManifestPlugin({ writeToFileEmit: true, fileName: `${getPrivatePath(process.cwd())}/manifest.json` }), */ new rspack.ProvidePlugin({ process: 'process/browser' }), new rspack.DefinePlugin(projectClientDefines), new rspack.CssExtractRspackPlugin() ].filter(Boolean), experiments: { css: false }
Without a repository we cannot see the problem.
I upgraded rspack to version 0.6.5 and this problem was solved. I guess the latest version may have solved this bug.
