I'm trying to use an npm react module that needs c...

# javascript

[dave08]

I'm trying to use an npm react module that needs css for it to work... the html renders with my wrapper... but no css.

[dave08]

A demo is here: https://codesandbox.io/s/b12cd?file=/src/demo/RatingDemo.tsx:44-91

[dave08]

I'm trying :

require("@primereact/resources/themes/saga-blue/theme.css")
	require("@primereact/resources/primereact.css")

in my fun main()

[dave08]

And my wrapper is:

@file:Suppress("INTERFACE_WITH_SUPERCLASS", "OVERRIDING_FINAL_MEMBER", "RETURN_TYPE_MISMATCH_ON_OVERRIDE", "CONFLICTING_OVERLOADS")

@file:JsModule("primereact/rating")
@file:JsNonModule

import kotlin.js.*
import react.Component
import react.RProps
import react.RState
import react.ReactElement

external interface RatingProps : RProps {
	var id: String?
		get() = definedExternally
		set(value) = definedExternally
	var value: Number?
		get() = definedExternally
		set(value) = definedExternally
	var disabled: Boolean?
		get() = definedExternally
		set(value) = definedExternally
	var readOnly: Boolean?
		get() = definedExternally
		set(value) = definedExternally
	var stars: Number?
		get() = definedExternally
		set(value) = definedExternally
	var cancel: Boolean?
		get() = definedExternally
		set(value) = definedExternally
	var style: Any?
		get() = definedExternally
		set(value) = definedExternally
	var className: String?
		get() = definedExternally
		set(value) = definedExternally
	var tooltip: Any?
		get() = definedExternally
		set(value) = definedExternally
	var tooltipOptions: Any?
		get() = definedExternally
		set(value) = definedExternally
	val onChange: ((e: `T$1`) -> Unit)?
}

external class Rating : Component<RatingProps, RState> {
	override fun render(): ReactElement?
}

[Robert Jaros]

Do you have any custom configuration in webpack.config.d ?

[dave08]

Nope

[dave08]

Just followed the kotlin js tutorial, and wanted to see how to add this. I also switched to ir

[Robert Jaros]

What dependency have you added to your gradle build?

[Robert Jaros]

If it's primereact why do you require("@primereact/...")?

[dave08]

implementation(npm("primereact", "~6.0.2"))
implementation(npm("primeicons", "~4.1.0"))
implementation(npm("primeflex", "~2.0.0"))

But primereact doesn't have an index.d.ts... so it seems like each component is it's own module..

[dave08]

in rating.d.ts:

export * from './components/rating/Rating';

[dave08]

In the root of the primereact module there's a bunch of those...

[dave08]

Ok, it needed some extra configs in webpackconfig.d