After updating to css-loader 4 the d.ts file is empty

[jens-duttke]

I've updated to the css-loader from version 3 to verson 4, and after building the project, all my styles.d.ts files are empty (only containing the banner):

My configuration:

{
	test: /\.module\.scss$/u,
	use: [
		devMode ? 'style-loader' : {
			loader: MiniCssExtractPlugin.loader,
			options: {
				publicPath: '/', // CDN path here
				hmr: devMode
			}
		},
		{
			loader: 'dts-css-modules-loader',
			options: {
				namedExport: true,
				banner: '// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!'
			}
		},
		{
			loader: 'css-loader',
			options: {
				modules: {
					localIdentName: '[local]__[hash:base62:5]', // Module scoped class name
					exportLocalsConvention: 'camelCaseOnly'
				},
				sourceMap: true
			}
		},
		{
			loader: 'postcss-loader',
			options: {
				sourceMap: true
			}
		},
		{
			loader: 'sass-loader',
			options: {
				sassOptions: {
					outputStyle: 'expanded'
				}
			}
		}
	]
},

A styles.d.ts file before the update:

// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
export const dialog: string;
export const content: string;
export const title: string;

And after the update:

// This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!

[c0gnize]

@jens-duttke, tell me please which versions of css-loader and dts-css-modules-loader you use?

[jens-duttke]

@c0gnize I'm using:
"css-loader": "4.2.0",
"dts-css-modules-loader": "1.0.3",

and Node.JS version 14.4.0

[jens-duttke]

Sorry for the confusion with the css-loader versions. I was in a hurry and for some reason I thought I updated from version 2 to version 3.

Anyway, I've checked that in the code of dts-css-modules-loader now, and found the source of the problem.

Instead of setting the export directly, it's now written into ___CSS_LOADER_EXPORT___.locals.

That means the following code in the getClasses function doesn't match anymore:

from = ~from ? from : content.indexOf('exports.locals = {');

It has to be:

from = ~from ? from : content.indexOf('___CSS_LOADER_EXPORT___.locals = {');

I've changed that locally, and everything works again.

The code has been changed in css-loader by this Commit:
webpack-contrib/css-loader@56c0427#diff-2b4ca49d4bb0a774c4d4c1672d7aa781
This means, this change has been introduced in version 4.0.0 of css-loader.

[c0gnize]

@jens-duttke, please check with yourself