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

Question

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?

Have you found a solution? I had an application working 3 days ago and now, without any change, it's not working anymore... — valepu, Sep 12 '22 at 15:29
Not yet, unfortunately. If you also are stuck in this, maybe a dependency bump somewhere? — HelloWorld, Sep 12 '22 at 21:29
Yeah that was my thought, probably a minor webpack or css plugins version (app was created pretty recently) — valepu, Sep 13 '22 at 10:17
I solved doing this `{ test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ], exclude: /node_modules/ }` but i'm not sure it applies to your case because the css that was giving me issues was inside node_modules so ignoring it solved my problem — valepu, Sep 13 '22 at 10:54
I have the same, my `css` is located inside `node_modules`. Does that mean by ignoring it it will simply not be part of the bundle and stay a separate resource? — HelloWorld, Sep 14 '22 at 12:50
I haven't gotten as far as deplyoing the application but i've just tried to build the application and it put the css from my node_modules into the bundle. I invite you to test this solution and see if it works for you too — valepu, Sep 14 '22 at 13:32

score 1 · Answer 1 · edited Aug 27 '23 at 21:43

1

Why not 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,
            },
          },
        ],
      },
    ],
  },
}

edited Aug 27 '23 at 21:43

Aaron Meese

1,670
3
22
32

answered Sep 05 '22 at 21:27

Oscar Nilsson

31
3

Thanks! I tried it with `/\.s?css$/` to cover `.css` as well as `.scss` and all loaders as in your example, but unfortunately the error stays the same. – HelloWorld Sep 06 '22 at 00:48

score 0 · Answer 2 · answered Mar 12 '23 at 07:18

0

 { 
   test: /\.scss$/,
      //install these npm packages and use it in this exact order to compile scss files
        use: [
               'style-loader',
               'css-loader', 
               'sass-loader'
             ],
 }

answered Mar 12 '23 at 07:18

Ikenna Emmanuel

1
2

2

While this code snippet may be the solution, including a detailed explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Shawn Hemelstrand Mar 12 '23 at 11:22

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

2 Answers2