<p>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. :-(</p><figure class="image"><img src="https://images.unsplash.com/photo-1593720217529-01f0a5d09aed?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHwzfHx3ZWJwYWNrfGVufDB8fHx8MTY0ODk1MzA4Mg&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@flowforfrank?utm_source=DNX&amp;utm_medium=referral">Ferenc Almasi</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>Today I am working on updating my first public NPM package, <a target="_blank" rel="noopener noreferrer" href="https://www.npmjs.com/package/ckeditor5-build-classic-dna">ckeditor5-build-classic-dna</a>, which has not been updated for more than 6 months. I planned to bump the dependencies, one of them is webpack.</p><p>Here are some outdated packages:</p><pre><code class="language-plaintext" id="4UF4YOheQ"> "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"</code></pre><p>I try to update them to be :</p><pre><code class="language-plaintext" id="LCbQM5gCU">"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"</code></pre><p>Then, I got many errors:</p><h3>Unknown Property “soucreMap”</h3><pre><code class="language-plaintext" id="wCJt8K6ZD">[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? }</code></pre><p>The reason is that I have “sourceMap” option in the TerserPlugin. Looks like it's an easy fix by just removing it.&nbsp;</p><blockquote><p>"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.</p><p>–&nbsp;<a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/users/3886675/tomi-kokkonen">Tomi Kokkonen</a></p></blockquote><h3>Webpack: Unknown property "query"</h3><p>I had a webpack.config settings like this:</p><pre><code class="language-plaintext" id="p3qAnnTiF">{
	test: /\.js$/,
	exclude: /node_modules/,
	loader: "babel-loader",
	query: {
		presets: ["@babel/react"],
	},
},</code></pre><p>Since “query” is no longer valid, use options instead:</p><pre><code class="language-plaintext" id="p3qAnnTiF">{
	test: /\.js$/,
	exclude: /node_modules/,
	loader: "babel-loader",
	options: {
		presets: ["@babel/react"],
	},
},</code></pre><h3>Module parse failed: Unexpected token</h3><pre><code class="language-plaintext" id="t813wPYWC">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:</code></pre><p>In my case, &nbsp;the options for “postcss-loader” need “postcssOptions” attribute. What I had is:</p><pre><code class="language-plaintext" id="2bu96BazM">"css-loader",
{
	loader: "postcss-loader",
	options: styles.getPostCssConfig({
		themeImporter: {
		themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
		},
		minify: true,
	}),
}</code></pre><p>I changed it to:</p><pre><code class="language-plaintext" id="Fkr489vs3">"css-loader",
{
	loader: "postcss-loader",
	options: {
		postcssOptions: styles.getPostCssConfig({
			themeImporter: {
				themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
			},
			minify: true,
		}),
	},
},</code></pre><h3>Need an additional loader</h3><pre><code class="language-plaintext" id="IPqyndJBw">You may need an additional loader to handle the result of these loaders.</code></pre><p>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.</p><p>The working setting is like this:</p><pre><code class="language-plaintext" id="LhTUU6IDi">{
	test: /\.css$/,
	use: [
		{
			loader: "style-loader",
			...
		},
		"css-loader", 
		{
			loader: "postcss-loader",
			...
		}
	]
}</code></pre><p>That's all! I think I don't need to deal with this for a while. :-)</p>

Webpack setup is a nightmare, at least for me. In this article, I am going to show you some webpack errors I got when I upgraded the webpack from 4 to 5, and the possible solutions to fix them.

All Posts In Webpack