Hi can someone please help me with this ReactJs app with Kot kotlinlang #javascript

Hi, can someone please help me with this (ReactJs...

Gurupad Mamadapur [FH]

12/04/2019, 8:41 AM

Hi, can someone please help me with this (ReactJs app with Kotlin)? Can't resolve the

react

imports (Unresolved reference for

import react.dom.*

)

Copy code

import react.dom.*
import kotlin.browser.document

fun main() {
    render(document.getElementById("root")) {
        h1 {
            +"Hello, React+Kotlin/JS!"
        }
    }
}

build.gradle file -

Copy code

plugins {
    id 'org.jetbrains.kotlin.js' version '1.3.61'
}

group 'com.example'
version '1.0-SNAPSHOT'

repositories {
    mavenCentral()
    jcenter()
    maven { url "<https://dl.bintray.com/kotlin/kotlin-js-wrappers>" }
    maven { url "<https://dl.bintray.com/kotlin/kotlinx>" }
}

kotlin {
    target {
        browser()
    }

    sourceSets {
        main {
            dependencies {
                implementation kotlin('stdlib-js')
                implementation kotlin('test-js')

                implementation kotlin('stdlib-js')
                implementation "org.jetbrains.kotlinx:kotlinx-serialization-runtime-js:0.10.0"
                implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core-js:1.2.0"

                implementation(npm("core-js", "^2.0.0"))
                implementation(npm("svg-inline-loader", "0.8.0"))
                implementation(npm("kotlinx-html", "0.6.12"))
                implementation(npm("@jetbrains/kotlin-react", "16.6.0-pre.67"))
                implementation(npm("@jetbrains/kotlin-react-dom", "16.6.0-pre.67"))
                implementation(npm("@jetbrains/kotlin-styled", "1.0.0-pre.67"))
                implementation(npm("@jetbrains/kotlin-extensions", "1.0.1-pre.67"))
                implementation(npm("@jetbrains/kotlin-css", "1.0.0-pre.67"))
                implementation(npm("@jetbrains/kotlin-css-js", "1.0.0-pre.67"))
                implementation(npm("react", "16.8.3"))
                implementation(npm("react-dom", "16.8.3"))
                implementation(npm("inline-style-prefixer", "5.0.4"))
                implementation(npm("styled-components", "3.4.10"))
                implementation(npm("@jetbrains/logos", "1.1.4"))
                implementation(npm("@jetbrains/ring-ui", "2.0.0-beta.11"))
            }
        }

        test {
            dependencies {
                implementation(npm("enzyme", "3.9.0"))
                implementation(npm("enzyme-adapter-react-16", "1.12.1"))
            }
        }
    }
}

Ivan Kubyshkin [JetBrains]

12/04/2019, 9:13 AM

@Gurupad Mamadapur [FH] Hi! I copy your gradle file and code and there is no problem for me.

Gurupad Mamadapur [FH]

12/04/2019, 9:15 AM

My gradle-wrapper has

gradlew-5.2.1-all

Gurupad Mamadapur [FH]

12/04/2019, 9:21 AM

@Ivan Kubyshkin [JetBrains] Thanks you. The issue was the gradle version, switched to 6.0, it works fine now

Ivan Kubyshkin [JetBrains]

12/04/2019, 9:22 AM

@Gurupad Mamadapur [FH] Thank you for information!

Gurupad Mamadapur [FH]

12/04/2019, 10:15 AM

@Ivan Kubyshkin [JetBrains] Hi now I have this error while the html is loaded -

Copy code

Module not found: Error: Can't resolve 'kotlin-react-dom'

This is the index.html file -

Copy code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kotlin full stack application demo</title>
    <style>
    body {
      margin: 0;
      padding: 0;
      font-size: 13px;
      font-family: -system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
      line-height: 20px;
    }

    </style>
</head>
<body>
<div id="root">Loading...</div>
<script src="kotlinjs.js"></script> <!-- kotlinjs is the name of the project -->
</body>
</html>

👀 1

Gurupad Mamadapur [FH]

12/04/2019, 11:11 AM

Nevermind looks like we need to add custom webpack config to resolve

kotin-react-dom

@jetbrains/kot...

- https://kotlinlang.slack.com/archives/C5ZTZ6ER0/p1563183844009600?thread_ts=1563181494.009200&cid=C5ZTZ6ER0

Christian Dräger

12/05/2019, 8:22 PM

here is a working example. check it out and have fun https://github.com/christian-draeger/kotlin-react-gradle-example it also follows the hint regarding the webpack config shizzle

👍 1

8 Views

Open in Slack

Previous Next