I’m getting: ```Type mismatch: inferred type is org.w3c.dom.Element but dom.Element was expected``` ...

# react

[Piotr Krzemiński]

I’m getting:

Type mismatch: inferred type is org.w3c.dom.Element but dom.Element was expected

with this code:

fun main() {
    createRoot(document.createElement("div").also { document.body!!.appendChild(it) })
        .render(App.create())
}

when bumping from kotlin-wrappers pre.430 to pre.431. What’s the new API? could you update kotlin-mui-showcase?

[Piotr Krzemiński]

CC @turansky

[Big Chungus]

I guess mui has its own dom api wrappers

[Big Chungus]

You can always unsafeCast()

[Piotr Krzemiński]

yeah, but technically it’s a breaking change in some basic, frequently used API - would be good to present a migration path

[turansky]

You can always unsafeCast()

No please! 🙂

[turansky]

I guess mui has its own dom api wrappers

DOM API in kotlin-browser - is what we use for all wrappers without exceptions.
For example update it will be required some time.

[Big Chungus]

Is it more covered than stdlib bindings?

[turansky]

Yes, we need all Browser API! 🙂

[turansky]

For some parts we use aliases on stdlib-js (media for example)

[turansky]

It’s for migration check, because in project we disable org.w3c.* imports

[Piotr Krzemiński]

what’s the recommendation about using newest versions of kotlin-wrappers? should I stay on the old version until the types mismatch is resolved? is it tracked somewhere?

[turansky]

Early birds will have less problems :)

[turansky]

And less !!

[Piotr Krzemiński]

could you show an example how it should work in the newest version?

[Piotr Krzemiński]

I’m starting from scratch actually

[turansky]

body is non-null now

[Piotr Krzemiński]

I mean:

Type mismatch.
Required: dom.Element
Found: org.w3c.dom.Element

[Big Chungus]

Use document.getElementById from kotlin-browser or unsafeCast

[Big Chungus]

i.e. either change the way you obtain the element or convert it before passing in to the function

[Big Chungus]

Cleanest solution would be to avoid org.w3c from stdlib and look for matching apis in dom. package

[turansky]

dom - isn’t single package

[Big Chungus]

I know, my point was to use apis from wrappers and avoid mixing them with stdlib alternatives where possible

[turansky]

Yes, it’s how it works

[turansky]

message has been deleted

[turansky]

And more packages in dom and media

[turansky]

Exclude list:

[turansky]

codeInsightSettings.xml

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="JavaProjectCodeInsightSettings">
    <excluded-names>
      <name>kotlin.browser.*</name>
      <name>kotlinx.browser.*</name>
      <name>kotlinx.dom.*</name>
      <name>org.khronos.*</name>
      <name>org.w3c.*</name>
    </excluded-names>
  </component>
</project>

[turansky]

MUI start point

import browser.document
import dom.html.HTML.div
import dom.html.createElement
import react.create
import react.dom.client.createRoot


private fun main() {
    val container = document.createElement(div)
    document.body.appendChild(container)

    createRoot(container)
        .render(Application.create())
}

[aerialist]

Hi @Piotr Krzemiński, showcases were updated, please take a look.