https://kotlinlang.org logo
Join Slack
Powered by
I have added `kotlin-react` libs manually in my ht...
# javascript
f
I have added 
kotlin-react
libs manually in my html but it can't find 
module
variable in the React libs.
Copy code
<script type="text/javascript" src="lib/kotlin/kotlin.js"> </script>
<script type="text/javascript" src="lib/kotlin/kotlinx-html-js.js"></script>
<script type="text/javascript" src="lib/kotlin/kotlin-wrappers-kotlin-react-jsLegacy.js"></script>
<script type="text/javascript" src="lib/kotlin/kotlin-wrappers-kotlin-react-dom-jsLegacy.js"></script>
<script type="text/javascript" src="js/webapp.js"></script>
Copy code
ReferenceError: module is not defined  kotlin-wrappers-kotlin-react-jsLegacy.js:845:1

ReferenceError: module is not defined kotlin-wrappers-kotlin-react-dom-jsLegacy.js:2472:1
My steps: 1. Copy js libs of Gradle local repo into my Project 2. Import js libs in my html Suggestions how to import Kotlin/JS libs?
t
You can include all dependencies (required parts) in final JS
React wrappers use 
commonjs
module kind and couldn’t be used in browser without modification
f
When you say 'final JS' is in my html?
React wrappers use 
commonjs
 module kind and couldn’t be used in browser without modification
Do I have to import 'stdlib-common' in my html?
t
commonjs
- JS library module format
Do I have to import ‘stdlib-common’ in my html?
You need configure DCE in your project After configuration you will find 1. App + Kotlin dependency (Single js file) in 
build/js/packages
directory 2. App + Kotlin dependency + NPM dependencies (Single js file) in 
build/distributions
directory
f
ok, I will try it.
t
Screenshot 2020-06-11 at 00.20.28.png
j
May I ask what the purpose is of adding these manually to the html file? I am a js noob and I started on a hobby project including kotlin react wrappers, and writing the whole thing in Kotlin instead of HTML/javascript was one of the benefits I would say 🙂 Having a Gradle configuration instead of manually including it in the HTML file is a big win over what I did in my previous web development attempts.
👍 1
f
@Joost Klitsie, I am also new and only use HTML to linked the compiled Kotlin/JS file. Do you know any other way without using HTML?
Copy code
<body>
<div id="container" class="mainContainer">
 // this div I fill it in kotlin
</div>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script> window.socket = io() </script>
<script type="text/javascript" src="js/webapp.js"></script> //Kotlin/JS file
</body>
j
@frank I don't think you will get away with no html files at all for the moment, as you need an entrypoint. But the HTML can be minimal, only provide a div for your container and the app.js javascript and perhaps some CSS.
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">

    <link rel="stylesheet" href="<https://fonts.googleapis.com/icon?family=Material+Icons>">
    <link rel="stylesheet" href="<https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap>" />
    <link rel="stylesheet" href="<https://fonts.googleapis.com/icon?family=Material+Icons>" />
    <meta charset="UTF-8">
    <title>KotlinJs</title>
</head>
<body style="background-color: #00c494;">
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>
After this, you can import any library and add it to your project in the gradle script, making an App.kt file as an entry point and define your whole project from there. Kotlin javascript will generate the 1 app,js javascript file (or perhaps with a slightly different name) with all dependencies inside
and it shows exactly how to configure the project, as well as where to pull in the dependencies
So you don't import the react and the kotlin react wrappers in the html file, but in your build.gradle file
Copy code
implementation("org.jetbrains:kotlin-react:16.13.0-pre.94-kotlin-1.3.70")
    implementation("org.jetbrains:kotlin-react-dom:16.13.0-pre.94-kotlin-1.3.70")
    implementation(npm("react", "16.13.1"))
    implementation(npm("react-dom", "16.13.1"))
f
@Joost Klitsie thx, I also use same configuration.
t
Since version 
pre.104
npm dependencies available transitively
Copy code
implementation("org.jetbrains:kotlin-react:16.13.1-pre.107-kotlin-1.3.72")
    implementation("org.jetbrains:kotlin-react-dom:16.13.1-pre.107-kotlin-1.3.72")
f
@turansky, I have modified following your instructions and work. Reading about commonJs is only avaible in node-server if React uses commonJS and I call in front-end my Kotlin/JS file, should always fail. How did dceTask fix this?
t
DCE use only required parts of Kotlin libraries If you use default settings (
umd
module kind) you will get JS file: 1. With included dependencies 2. Ready for run in browser, because 
umd
Additionally: 1. 
commonjs
- good format for modular JS libraries. React wrappers - not exception 2. In 
IR
Kotlin/JS libraries will not have JS part by default
f
@turansky, Last question. When i was testing your project KT-TEST I had trouble finding lib Project, I had to manually add to my gradle local repo for fix it. How did you deploy your lib project in local repo?
t
Last question.
Don’t stop! 🙂 
KT-TEST
- test project (reproduce some bug) like all in those repo
How did you deploy your lib project in local repo?
./gradlew publishToMavenLocal
👍 1
Open in Slack
PreviousNext
Powered by