How to fix 'Unknown word' error when bundling css file in webpack

HelloWorld 0
Viewed 62

I am building an Electron app in Angular and I am upgrading a couple of dependencies to the latest versions.

  • ✅ Electron stays on v19
  • ✅ Tailwindcss v3.1.8
  • ⬆️ Angular v11 to v14
  • ⬆️ Webpack v4.46.0 to v5.74.0

ℹ️ The entire project compiled before successfully.

I am using the monaco-editor and since bumping the deps above I am running into an issue during the bundling stage of webpack.

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";

Before bumping the versions the webpack.config.json only contained a rule for /\.scss$/! But suddenly with webpack v5 it failed that it is unable to understand some css files (famous error: You may need an appropriate loader to handle this file type).

So I assumed a rule for CSS was missing. I added the rule and my webpack file now looks like this:

{
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: sassImplementation,
            },
          },
        ],
      },
    ],
  },
}

Please note the order "style-loader", "css-loader", 'postcss-loader' that has been reported as the correct one in posts like here and here. I still receive the error above.

Can anyone point out if my webpack is misconfigured or if I missed a rule?

monaco-editor webpack tailwind-css javascript css
1 Answers

why note combine the tests? no need to have two different since the sass loader will convert it to css.

{
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
            "style-loader",
            "css-loader",
            "postcss-loader"
          {
            loader: 'sass-loader',
            options: {
              implementation: sassImplementation,
            },
          },
        ],
      },
    ],
  },
}
Oscar Nilsson0
Related