Some fixes of Webpack errors

Adam C. | 3 years ago

Webpack setup is a nightmare, at least for me. Good thing is that normally I don't deal with it. Thanks to Create React Apps, Next.JS, etc. framework which has done the dirty thing for us. But sometimes I do have to. :-(

Today I am working on updating my first public NPM package, ckeditor5-build-classic-dna, which has not been updated for more than 6 months. I planned to bump the dependencies, one of them is webpack.

Here are some outdated packages:

 "css-loader": "^4.2.2",
 "postcss-loader": "^3.0.0",
 "raw-loader": "^4.0.2",
 "style-loader": "^1.2.1",
 "terser-webpack-plugin": "^4.1.0",
 "webpack": "^4.44.1",
 "webpack-cli": "^3.3.12"

I try to update them to be :

"css-loader": "^6.7.1",
"postcss-loader": "^6.2.1",
"raw-loader": "^4.0.2",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.1",
"webpack": "^5.71.0",
"webpack-cli": "^4.9.2"

Then, I got many errors:

Unknown Property “soucreMap”

[webpack-cli] Failed to load '/Users/dcai/Projects/npm/CK/ckeditor5-build-classic-dna/webpack.config.js' config
[webpack-cli] Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'sourceMap'. These properties are valid:
   object { test?, include?, exclude?, terserOptions?, extractComments?, parallel?, minify? }

The reason is that I have “sourceMap” option in the TerserPlugin. Looks like it's an easy fix by just removing it. 

"sourceMap" is no longer an option in TerserPlugin, but it will automatically detect if it get source maps to process and pass that option to Minify.

– Tomi Kokkonen

Webpack: Unknown property "query"

I had a webpack.config settings like this:

{
	test: /\.js$/,
	exclude: /node_modules/,
	loader: "babel-loader",
	query: {
		presets: ["@babel/react"],
	},
},

Since “query” is no longer valid, use options instead:

{
	test: /\.js$/,
	exclude: /node_modules/,
	loader: "babel-loader",
	options: {
		presets: ["@babel/react"],
	},
},

Module parse failed: Unexpected token

ERROR in ./node_modules/@ckeditor/ckeditor5-table/theme/table.css (./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/@ckeditor/ckeditor5-table/theme/table.css) 1:0
Module parse failed: Unexpected token (1:0)
File was processed with these loaders:

In my case,  the options for “postcss-loader” need “postcssOptions” attribute. What I had is:

"css-loader",
{
	loader: "postcss-loader",
	options: styles.getPostCssConfig({
		themeImporter: {
		themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
		},
		minify: true,
	}),
}

I changed it to:

"css-loader",
{
	loader: "postcss-loader",
	options: {
		postcssOptions: styles.getPostCssConfig({
			themeImporter: {
				themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
			},
			minify: true,
		}),
	},
},

Need an additional loader

You may need an additional loader to handle the result of these loaders.

Sounds like I missed a CSS loader, after some research, I should add “css-loader” between “style-loader” and “postcss-loader”, which makes a good sense, but I am not why it worked before without it.

The working setting is like this:

{
	test: /\.css$/,
	use: [
		{
			loader: "style-loader",
			...
		},
		"css-loader", 
		{
			loader: "postcss-loader",
			...
		}
	]
}

That's all! I think I don't need to deal with this for a while. :-)