https://kotlinlang.org
Join Slack
hi! I started following this guide about Kotlin/JS, yet I'm stuck on this part: <https://play.kotlin...
# javascript
t
hi! I started following this guide about Kotlin/JS, yet I'm stuck on this part: https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/03_A_First_Static_Page, where you do the 
KotlinConf Explorer
Page. I made sure my code is right (I checked the repo), yet nothing appears in my browser.
m
Anything in the browser console? If not, what’s your code exactly?
t
When I looked at the browser error, this was the error: 
Uncaught Error: Minified React error #200; visit <https://reactjs.org/docs/error-decoder.html?invariant=200> for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
m
There’s a mismatch between your 
index.html
and your Kotlin code. There should be a 
<div>
with 
id="root"
in your 
index.html
. And 
document.getElementById("root")
in your Kotlin code references that 
div
.
Alternatively you may execute your script too early - before the 
div
.
t
this is my kotlin code
Copy code
fun main() {
	render(document.getElementById("root")) {
		h1 { +"KotlinConf Explorer" }
		div {
			h3 { +"Videos to watch" }
			p { +"John Doe: Building and breaking things" }
			p { +"Jane Smith: The development process" }
			p { +"Matt Miller: The Web 7.0" }

			h3 { +"Videos watched" }
			p { +"Tom Jerry: Mouseless development" }
		}
		div {
			h3 { +"John Doe: Building and breaking things" }
			img {
				attrs { src = "<https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder>" }
			}
		}
	}
}
and my html file:
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Learning Kotlin/JS</title>
</head>
<body>
<script src="KotlinJS.js"></script>
<div id="root"></div>
</body>
</html>
m
You have to move 
<script src="KotlinJS.js"></script>
below 
<div id="root"></div>
, as shown in the tutorial.
t
ohhhh
ok
thanks so much!
👍 1
7 Views
Open in Slack
PreviousNext
Powered by

kotlinlang

A modern programming language that makes developers happier.

Powered by