ring-ui webpack css error

I’m trying to use ring-ui header (I have of course added the config block to a js file in the webpack.config.d folder) First I encountered an error complaining that core-js can’t be found. I added the dependency through gradle

implementation(npm("core-js", "3.16.2"))

Now I’m seeing the error below. I searched a bit and found this question but don’t know how to fix it.

Error:

Module build failed (from ../../node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /.../build/js/node_modules/@jetbrains/ring-ui/components/alert/alert.css Unknown word

  1 | 
> 2 |       var API = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    |       ^
  3 |       var domAPI = require("!../../node_modules/style-loader/dist/runtime/styleDomAPI.js");
  4 |       var insertFn = require("!../../node_modules/style-loader/dist/runtime/insertBySelector.js");



Error:

Module build failed (from ../../node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /.../build/js/node_modules/@jetbrains/ring-ui/components/alert/container.css Unknown word

  1 | 
> 2 |       var API = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    |       ^
  3 |       var domAPI = require("!../../node_modules/style-loader/dist/runtime/styleDomAPI.js");
  4 |       var insertFn = require("!../../node_modules/style-loader/dist/runtime/insertBySelector.js");



Error:

Module build failed (from ../../node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /.../build/js/node_modules/@jetbrains/ring-ui/components/auth/down-notification.css Unknown word

  1 | 
> 2 |       var API = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    |       ^
  3 |       var domAPI = require("!../../node_modules/style-loader/dist/runtime/styleDomAPI.js");
  4 |       var insertFn = require("!../../node_modules/style-loader/dist/runtime/insertBySelector.js");

p.s I have applied the WA for this issue so maybe a webpack 4.0.0 compatiblity issue?

afterEvaluate {
    rootProject.extensions.configure<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension> {
        versions.webpackDevServer.version = "4.0.0"
    }
}

[Neitex]

I’ve had this problem in past. For me, disabling cssSupport at build.gradle.kts helped:

browser {
            // ...
            commonWebpackConfig {
                cssSupport.enabled = false
            }
            // ...
        }

I don’t fully understand why, but it works 😃

[turansky]

Please consider adding it to readme

It can be done by any developer with GitHub account! 😃