kotlinlang #react

Dirk

09/05/2023, 8:19 AM

Hello, I have a problem after updating to the new React wrapper version. It is not clear to me what I have to change here:

Steven

09/08/2023, 11:50 AM

Hi, I'm compiling a Kotlin react application that's a couple months old, and

external fun require(path: String): String

does not work anymore; I get the error:

Uncaught ReferenceError: require is not defined

. Does anyone know the cause?

Dmitriy Malayev

09/18/2023, 5:55 PM

Copy code

Hello. I am trying to implement a progress bar when a user tries to download a report and I'm getting errors

suspend fun downloadReportSection(
    reportFileName: String,
    section: EsgSection? = null,
    progressCallback: (Int) -> Unit
): ByteArray? {
    return try {
        val response = httpClient.get("${BackendReportingServiceURL}/esg-report/preview-report") {
            parameter("reportFileName", reportFileName)
            section?.let { parameter("section", it.name) }

            onUpload { bytesSentTotal, contentLength ->
                val progressPercentage = ((bytesSentTotal / contentLength.toDouble()) * 100).toInt()
                progressCallback(progressPercentage)
            }
        }
        if (response.status == HttpStatusCode.OK) {
            progressCallback(100) // 100% completion once done
            return response.readBytes()
        } else {
            null
        }
    } catch (e: Exception) {
        console.log("Error: ${e.message}")
        null
    }
}


            Box {
                Button {
                    variant = ButtonVariant.contained

                    onClick = {
                        mainScope.launch {
                            val pdfReport = downloadReportSection(
                                props.esgReportStateProps.reportFileName,
                                EsgSection.General,
                                progressCallback = {}
                            )
                            pdfReport?.let {
                                val blob = Blob(arrayOf(it), BlobPropertyBag("application/pdf"))
                                val url = URL.createObjectURL(blob)
                                val a = document.createElement("a") as HTMLAnchorElement
                                a.href = url
                                a.download = props.reportStateProps.reportFileName
                                a.click()
                            }
                        }
                    }
                    +"Preview"
                }
            }


Could not load content for  /kotlinx-coroutines-core/js/src/internal/CoroutineExceptionHandlerImpl.kt?6a41 (Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

Error_0 {message: 'Fail to fetch', cause: TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.

Shubham Singh

09/30/2023, 6:36 AM

Hi friends Is there a project template/wizard for creating just Kotlin/JS projects? I cannot see anything like that in the latest versions of IntelliJ IDEA anymore

Richard Ulysse

10/19/2023, 7:31 PM

Hi, does anyone know if this is possible with Kotlin ReactJS? https://webpack.js.org/guides/code-splitting/

Dmitriy Malayev

11/20/2023, 3:20 PM

Hi I'd like to know if there is something similar to React Dev Tools but for Kotlin/JS. I do see Structure section in intellij but it's different.

Hildebrandt Tobias

11/30/2023, 2:44 PM

Hi, I have an issue which would probably have been better to be posted here, but I discovered this channel too late. If someone might be able to help it would be very appreciated: https://kotlinlang.slack.com/archives/C0B8L3U69/p1701300142880039

andylamax

12/01/2023, 7:57 PM

kotlin-wrappers:kotlin-react-core

is an amazing library filled with very well described externals for react. I like how it is separated from

kotlin-react

which brings convenience functions to be used from kotlin. However, I have faced some challenges using these wrappers on our own kotlin/react library that has got to be consumed from typescript When we publish our kotlin/react library, it ends up having a react dependency in it's

package.json

which forces our consumers to update to the react version from

kotlin-wrappers:kotlin-react

and

kotlin-wrappers:kotlin-react-core

as bundled by our kotlin/react library. This can be challenging and problematic. My request to @turansky is can we add

react

as an

peerDependency

kotlin-wrappers:kotlin-react

and

kotlin-wrappers:kkotlin-react-core

so that our users won't be forced to use

react

that comes from these amazing library

Hildebrandt Tobias

12/04/2023, 11:14 AM

In Strict Mode components are rendered twice to find unwanted behaviour. So how would you go about ensuring correct behaviour in this case? For example I want to fetch something from a backend API or OAuth, the way I understand it you want to fetch this kind of data in react loaders and not inside the component (render), but those loaders don't have access to

useContext

. So do I need to apply the way described here: https://stackoverflow.com/questions/74757787/react-data-router-pass-context-to-loader or is there a simpler way that I don't see for this overall issue?

Hakon Grotte

12/21/2023, 10:06 AM

How can I use the

keepPreviousData

flag in React Query’s

useQuery

through

placeHolderData

? Through the kotlin-wrappers the former is defined as

external fun <T> keepPreviousData(previousData: T?): T?

and the latter as

Any

, with some types commented out. Library docs: Tanstack Query docs I’m using wrappers-bom:1.0.0-pre.668.

Jay Carey

01/10/2024, 11:55 AM

I have a couple of highly subjective questions I've been wondering about...and I appreciate that the answers will also probably be fairly biased as I'm asking it on the react channel of the kotlin slack! For context, I am sole developer on a web application, quite competent in kotlin, javascript and react. I vastly prefer kotlin over javascript due to type safety, reduced boilerplate and intuitive language and libraries. My questions: 1. is the experience of developing a web app using kotlin-js and react a decent option in terms of developer experience? I'm not opposed to learning new kotlin native frameworks if that's a better long term. Will I be forever retrofitting types onto the javascript libraries I use, or is that largely solved now? I had a hellish time with typescript a few years back... 2. is there a fairly straightforward migration path from an existing javascript/react app to kotlin-js/React? Perhaps I grow the kotlin-js side of things slowly over time? Or is it better to take the hit and migrate all at once?

Salman

02/22/2024, 4:12 PM

Hi, can someone tell me how can I add min and max value to the mui number textfield here?

_TextField_ *{*

+props

variant = FormControlVariant.outlined

type = InputType.number

fullWidth = true

}

Paul Meshkovsky

02/22/2024, 7:00 PM

Hi what is good channel to ask about gradle browserDistribution task I am trying to see if I can pin to specific webpack release I see we can pin to Major version https://kotlinlang.org/docs/js-project-setup.html#webpack-version Can we pin to specific minor verson as well ? we are running into an issue

Copy code

entrypoint size limit: The following entrypoint(s) combined asset size exceeds

and during the build this doesn't generate entry-point-file.js needed to run our react app We are using gradle 8.6. which specific webpack is this version tied to... how can I see this As we suspect the latest release https://github.com/webpack/webpack/releases/tag/v5.90.3

Anurag Kumar

04/24/2024, 5:21 PM

Hi team, How use React Native Android as sdk (AAR) and add in standalone Android native app ? Any latest Github link will help.

William Persall

04/24/2024, 11:04 PM

I am struggling to identify how to set css values with emotion. For example, listStyleType. When I look at its signature

public abstract var listStyleType: csstype.ListStyleType?

In my code I have tried

Copy code

listStyleType = ListStyleType. <-- no options appear
listStyleType = ListStyleType("none")   <-- syntax error thown.

This is not the only element I am struggling with. What is the place or stratagem to find the correct pairings of element ( left) and value representation ( right)?

Salman

04/25/2024, 12:22 PM

Hi, I m using mui select and it’s label stays in rest state if i programatically set value in it’s state (in case of edit operation), however when I change the value in dropdown, label shifts upwards and dropdown work perfectly, attached is the code and screenshot.

_Grid_ *{*

item = true

_xs_ = 12

_sm_ = 6

_md_ = 4

_FormControl_ *{*

fullWidth = true

_InputLabel_ *{*

+FacilityFields._STATE_.description

}

error = facilityValidationState.stateErrorState

_Select_ *{*

label = _ReactNode_(FacilityFields._STATE_.description)

value = facilityState.state onChange =

*{* event, _ *->*

setFacilityState(

facilityState.copy(

state = event.target.value

}

onBlur = *{*

_validateState_(facilityState, facilityValidationState, setFacilityValidationState)

}

for (state in USAStates._entries_) {

_MenuItem_ *{*

value = state.postalAbbreviation

+state.state

}

_FormHelperText_ *{*

+facilityValidationState.stateErrorMessage

}
} }

Salman

04/25/2024, 12:25 PM

image.png,image.png

Anurag Kumar

05/07/2024, 10:33 AM

Hi team, I need input for Creating ReactNative Android as a library and use it in Android Native Application.

Jonathan Lennox

07/10/2024, 9:42 PM

Hi, I'm trying to port some code from kotlin-react 16.13.1-pre-110-kotlin-1.4.0 to kotlin-react 18.3.1-pre.770, and I'm very confused as to what symbols I should be using and where I should be looking where to find them.

Jonathan Lennox

07/15/2024, 5:20 PM

I'm compiling code assigning an InputType.file to a react.dom.html.ReactHTML.input's type, but it's compiling to bad JS; am I doing something wrong?

Salman

08/02/2024, 11:20 AM

Hi, I am deserializing the date and time(UTC) from api in LocalDateTime from kotlix.datetime, can someone suggest me how do I convert this to user’s local browser date time using kotlinx.datetime itself and not converting LocalDateTime to javascript date (kotlin.js.Date)?

Robert Jaros

08/05/2024, 1:42 PM

Why was

kotlin-redux

module removed from the wrappers project? @turansky

Robert Jaros

08/05/2024, 2:56 PM

I was using this in

kotlin-react 754

, but it doesn't compile anymore (

EffectBuilder

was replaced with

CoroutineScope

and

cleanup

function is no longer available):

Copy code

useEffect {
    // ...
    cleanup {
        // ...
    }
}

What should I use now?

Moritz Hofmeister

08/14/2024, 9:27 AM

I just opened an issue for a kotlin wrappers issue here. Related question: What’s the intended way to use the

onChange

function for MUI components now? Previously, with the

value

parameter being

dynamic

it was pretty straight forward because we just did

onChange = { _, value: String?, _, _ -> … }

. Now, with

value

being refactored from

dynamic

Any

Any?

depending on the component, I need to do an unsafe cast inside the function like

value as String?

. Is this really the intended way?

Paul Meshkovsky

10/28/2024, 9:48 PM

Migrated to Kotlin Multiplatfrom form JS and jsBrowserDevelopmentRun works BUT when running jsBrowserProductionWebpack the task fails updated setting to debug to see any relevant information Hoping this is the right channel to aid on this getting the following error 1. Looking further this blew away our custom webpackConfig.js error and added patch.js now we see the following... .. after restoring webpackConfig.js issue is resolved.. I suspect this was done by IntelliJ

Copy code

2024-10-28T17:09:44.788-0400 [DEBUG] [org.gradle.api.Task] ERROR in main
2024-10-28T17:09:44.788-0400 [DEBUG] [org.gradle.api.Task] Module not found: Error: Can't resolve './src' in '/Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal'
2024-10-28T17:09:44.788-0400 [DEBUG] [org.gradle.api.Task] resolve './src' in '/Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal'
2024-10-28T17:09:44.788-0400 [DEBUG] [org.gradle.api.Task]   using description file: /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/package.json (relative path: .)
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]     Field 'browser' doesn't contain a valid alias configuration
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]     using description file: /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/package.json (relative path: ./src)
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]       no extension
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         Field 'browser' doesn't contain a valid alias configuration
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/src doesn't exist
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]       .js
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         Field 'browser' doesn't contain a valid alias configuration
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/src.js doesn't exist
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]       .json
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         Field 'browser' doesn't contain a valid alias configuration
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/src.json doesn't exist
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]       .wasm
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         Field 'browser' doesn't contain a valid alias configuration
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/src.wasm doesn't exist
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]       as directory
2024-10-28T17:09:44.789-0400 [DEBUG] [org.gradle.api.Task]         /Users/developer/projects/our-project/build/js/packages/our-project-web-our-web-portal/src doesn't exist

Moritz Hofmeister

11/05/2024, 8:38 PM

Great react lazy loading results after switching from

commonJS

es2015

(per file compilation). 🎉 Our results, gzipped (Campus-QR): • Without lazy loading: ◦ Development: 6.9 MB ◦ Production: 1.01 MB • With lazy loading: ◦ Development: 3.3 MB ◦ Production: 0.32 MB So depending on the application, this can be a very good solution to improve initial load times. Anyway, that’s some impressive initial load speedup. Thanks for making this possible, @turansky et al.

😀 3

➕ 3

🎉 5

Zyle Moore

12/17/2024, 10:02 PM

Is there a way to pre-render a component, and then conditionally include it in the render? In TypeScript, I can set a variable to some JSX output, and then use that during the render of an outer functional component, like a div wrapper.

Copy code

function Example() {
    const someCondition = true;
    const someOtherCondition = true;
    const someComponent = (<p>some component</p>);
    const someOtherComponent = (<p>some other component</p>);
    return (<>
        <div>{someCondition && someComponent}</div>
        <div>{someOtherCondition && someOtherComponent}</div>
    </>);
}

Using a direct translation in Kotlin renders things out of order, the p before the div, and since the react functions are mutators, not factories, they only return Unit

Copy code

val Example = FC {
    val someCondition = true
    val someOtherCondition = true
    val someComponent: Unit = p { +"some component" }
    val someOtherComponent: Unit = p { +"some other component" }

    div { if (someCondition) { @Suppress("UNUSED_EXPRESSION") someComponent } }
    div { if (someOtherCondition) { @Suppress("UNUSED_EXPRESSION") someOtherComponent } }
}

In my specific case, I need to render a component in one of two containers, depending on some current state. Like a

<details>

with a

name

so only one in a group can be open at once. The only ways I've found so far are to either duplicate the unused div, or render the same component in both blocks like so.

Copy code

if (someCondition) {
    div { p { +"some component" } }
    div { p { +"some other component" } }
}
else if (someOtherCondition) {
    div { p { +"some other component" } }
    div { p { +"some component" } }
}
// or
div {
    if (someCondition) {
        p { +"some component" }
    }
    else if (someOtherCondition) {
        p { +"some other component" }
    }
}
div {
    if (someOtherCondition) {
        p { +"some component" }
    }
    else if (someCondition) {
        p { +"some other component" }
    }
}

Moritz Hofmeister

01/10/2025, 3:17 PM

I just came across the MUI X Charts. Having wrappers for them would be really nice, especially since the kotlin-wrappers already heavily support so many MUI libraries. @turansky

Hildebrandt Tobias

02/03/2025, 1:25 PM

Hey when using TanStackTable I have an infinite loop when the data array is filtered. So even when I do

Copy code

val tableData = loader.unsafeCast<Array<MyType>>()

TanStackTable {
  data = tableData.filter { true }.toTypedArray()
  ...
}

the tab freezes and I get infinite TanStack refreshes. Edit: I now have done it with a

useMemo

I hope that's correct.

Copy code

val tableData = loader.unsafeCast<Array<MyType>>()
val filtered = useMemo(tabledata) { tableDaata
  ?.filter{ <somePredicate> }
  ?.toTypedArray()
}

TanStackTable {
  data = filtered 
  ...
}

Hildebrandt Tobias

04/24/2025, 11:00 AM

I have a bit of a performance issue and would like to ask what the best practices are. How can I update an element of a list, without triggering a rerender for all list elements? So in my code there is something along the lines of this (pseudo/untested):

Copy code

data class Profile(
    val name: String,
    val entries: List<ProfileEntries>
)

val testView = FC<Props> {
    val profile by fetchProfilesOverApi()

    profile.entries.forEach { entry ->
        Typography { +entry.title}
        TipTapEditor {
            content = entry.content
            onUpdate = { uContent ->
                entry.copy(content = uContent).let { uEntry ->
                    profile = profile.filter { it.id != uEntry.id }.plus(uEntry)
                }
            }
        }
    }
}

The problem is now even with a debounce in

onUpdate

it still rerenders all list elements, even the ones who haven't changed. Is there a more "react" way of doing this? A custom

Component

that has it's own state or something? Or a pattern where the changes are not applied to the fetched profiles, but are merged with the edited entries afterwards?