In the process of upgrading dependencies to the latest versions for my Electron app built in Angular, I have encountered some issues.
- ✅ Electron remains on
v19 - ✅ Tailwindcss is updated to
v3.1.8 - ⬆️ Angular is being upgraded from
v11tov14 - ⬆️ Webpack is being updated from
v4.46.0tov5.74.0
ℹ️ Previously, the entire project compiled successfully.
I am utilizing the monaco-editor and after updating the dependencies, I am facing an issue during the webpack bundling stage.
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(2:7) /.../projects/foo/node_modules/monaco-editor/min/vs/editor/editor.main.css Unknown word
1 |
> 2 | import API from "!../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^
3 | import domAPI from "!../../../../style-loader/dist/runtime/styleDomAPI.js";
4 | import insertFn from "!../../../../style-loader/dist/runtime/insertBySelector.js";
Prior to updating the versions, the webpack.config.json only had a rule for /\.scss$/! However, with webpack v5, it started failing to understand some css files, indicating that an appropriate loader was needed to handle the file type.
Thus, I assumed a rule for CSS was missing. I included the rule, resulting in the following webpack configuration:
{
module: {
rules: [
{
test: /\.css$/i,
use: [
"style-loader",
"css-loader",
"postcss-loader"
],
},
{
test: /\.scss$/,
use: [
'postcss-loader',
{
loader: 'sass-loader',
options: {
implementation: sassImplementation,
},
},
],
},
],
},
}
It's worth noting the order of "style-loader", "css-loader", 'postcss-loader' which has been recommended in various sources like here and here. However, the error mentioned above persists.
Could someone help identify if my webpack configuration is incorrect or if I overlooked a rule?