A modern programming language that makes developers happier.

kotlinlang

Hi, I am trying to wrap a simple library : <https://www.npmjs.com/package/react-katex> in kotlin/js, I have no problem to wrap the React component but I have no idea of how to import the css needed by the component. How do I do `*import* 'katex/dist/katex.min.css';` in kotlin/js ?
I already have :
```@file:JsModule("react-katex")
@file:JsNonModule

package fr.jeanjacquelin.adminmc.front.component.wrapper.katex

import react.Component
import react.RProps
import react.RState
import react.ReactElement

external interface InlineMathProps : RProps {
    var math: String?
}

@JsName("InlineMath")
external class InlineMathComponent : Component&lt;InlineMathProps, RState&gt; {
    override fun render(): ReactElement?
}```
(I also did the dsl function to call it)
It works but the css is not loaded

You can do it with following code:
```@JsName("require")
private external fun requireCss(path: String): dynamic

private val katexCss = requireCss("react-katex/dist/katex.min.css")```
with enabled css support
```browser {
    commonWebpackConfig {
        cssSupport.enabled = true
    }
}```
<https://github.com/kotlin-hands-on/web-app-react-kotlin-js-gradle/blob/15afabf83e3dc339a6da0d3d3a4e64429a7d88d9/build.gradle.kts#L19|Gradle script example>

I am pretty new to kotlin/js (and react) and I think I am missing something.
I have added the css support in gradle as you said, I have also created the requireCss function but I am not sure of where and how to use it.
I don't know if that matters but I am using styled components.
In the react-katex readme they say "Don't forget t import the KaTeX CSS file"
So I am calling the requireCss function in the file where I have the functionalComponent that uses the katex component, but do I have to apply it or something ?
When I call it from this file, I have this error :
`Module 'react-katex/dist/katex.min.css' not found`

^ it is a compilation error during JsBrowserProductionWebpack task

I have figured it out that It was
```requireCss("katex/dist/katex.min.css")```
instead of
```requireCss("react-katex/dist/katex.min.css")```
so mb for this one but I still have an error  with the loader:
```Module parse failed: Unexpected character ' ' (1:4)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <https://webpack.js.org/concepts#loaders>
  (Source code omitted for this binary file)```
This error is repeated a lot and I don't understand it

I have found a workaround by adding the resources of KaTeX (<https://github.com/KaTeX/KaTeX>) directly in my index.html. But is this the right way to do it? I have a the feeling that it is dirty