https://kotlinlang.org logo
Join Slack
Powered by
`Unresolved reference: browser` why?
# getting-started
r
Unresolved reference: browser
why?
r
Perhaps your project is not Kotlin/JS
e
https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.browser/ see how everything there has a yellow dot? it's only available in JS sourcesets
r
how do I get the JS sourcesets?
e
did you follow the Kotlin/JS set up
r
that is much more complicated than the guides I am finding online
I just want to write kotlin and compile it to js. I don't want anything fancy or heavy weight
like using multiplatform
I don't think i need that, do I?
e
you do
anything that's not Kotlin/JVM is multiplatform
r
@ephemient so does this look right then? ``````
Copy code
plugins {
    kotlin("jvm") version "1.9.22"
    kotlin("multiplatform") version "1.9.22"
}

group = "org.example"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
}

dependencies {
    testImplementation("org.jetbrains.kotlin:kotlin-test")
    implementation("org.jetbrains.kotlin:kotlin-stdlib-js")
}

tasks.test {
    useJUnitPlatform()
}
kotlin {
    jvmToolchain(21)
    js {
        browser {
        }
        binaries.executable()
    }
    sourceSets {
        val jsMain by getting {
            dependencies {
                implementation("org.example.myproject:1.1.0")
            }
        }
    }
}
e
remove 
kotlin("jvm")
, and 
dependencies
block needs to move or be removed
r
why remove dependencies?
i am confused as there are multiple referneces of this word
like in side the js sourceset
e
root 
dependencies
is Gradle dependencies, which are no longer correct in multiplatform
r
so each multiplatform target needs its own deps
are sourcesets multiplatform targets?
e
dependencies
inside the 
sourceSet._name_
is a Kotlin Gradle Plugin API that manages multiplatform dependencies
you can have common dependencies too (shared among multiple sourcesets/targets)
each target has two sourcesets by default, main and test
r
I dont reall yunderstnad this line
`
Copy code
dependencies {
    implementation("org.example.myproject:1.1.0")
}
`
why am I including my own project
when this is inside of that project
isnt that circular
e
you should not be doing that
r
ohk misinterpreting the docs then
they must mean, this would be some secondary external project
that you include into this fake docs project
so then, what do I put here
Copy code
sourceSets {
        val jsMain by getting {
            dependencies {
                
            }
        }
    }
i dont really need any js dependencies
i just want native js stuff
and browser calls like canvas api
e
well you would put those in there too
r
dont understand what you mean
e
NPM dependencies can be added to jsMain/jsTest dependencies, just like Kotlin/JS dependencies
r
this?
Copy code
sourceSets {
        val jsMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlin:kotlin-stdlib-js")
            }
        }
    }
e
you do not need that, kotlin-stdlib is set up by default
r
yeah I dont need any NPM stuff, just native JS + the HTML dom elements
but this is 
:kotlin-stdlib-js"
the 
-js
is that setup by default?
e
yes
r
oh ok
so if I dont need any NPM depenedencies, just JS + HTML, what do I put?
e
if you don't need any dependencies then you don't need to configure the sourceset at all
r
but how do I get these lines working
Copy code
import kotlin.browser.document
import org.w3c.dom.*
those aren't npm dependencies
e
those are only available in a JS sourceset (e.g. 
src/jsMain/kotlin/**
and 
src/jsTest/kotlin/**
)
r
do I have to download that somewhere?
e
no, just create the folders and write your Kotlin files in there
r
image.png
so it is based on what I name the folder?
im a little confused on how that mechanically works
i guess it just only gives you access to js stuff in jsMain?
what if I want to name the folder something other than jsMain?
e
yes
don't
r
its not allowed? or just a bad idea
e
it is possible to configure the sourceset to add more directories, but it's not a good idea to do so in a way that would cause collisions
r
is the jsMain/kotlin necessary
i want to just do jsMain/main.kt
i never use java
just kotlin
e
it is the convention. yes it is necessary because 
jsMain/resources
can also exist and have a different meaning
r
ohk
the code in jsMain/kotlin can use classes I create in generalMain/kotlin too right?
they can share
e
commonMain, yes
r
commonMain is also special name?
e
yes
r
thanks for your help
oh btw
Copy code
sourceSets {
        val jsMain by getting {
            dependencies {

            }
        }
    }
can I just delete this whole thing then
e
yes. if you do not need to configure anything, you can delete the whole thing
you probably do want to at least add
Copy code
kotlin {
    sourceSets {
        commonTest {
            dependencies {
                implementation(kotlin("test")) // same as "org.jetbrains.kotlin:kotlin-test"
though
also
Copy code
kotlin {
    js {
        browser()
        binaries.executable()
if you want 
./gradlew jsRun
r
Where shoudl I put my html
in jsMain/resources?
e
yes
r
is jsMain/resources where my compiled js will go
when i compile
the dist/ basically
e
they are effectively merged together
r
what gets merged togethe
resources and jsMain?
e
the webpack output after processing the compiled kotlin, and resources
r
so I can do script src="built.js"
and expect built.js to just be there
inside the html
e
it will default to 
_modulename_.js
, and is configurable in webpack settings, but yes
r
guide i am following now says to do 
ktc-js -output canvas.js canvas1.kt
ktc-js is not a thing on my system
Copy code
./gradlew jsRun
oh ill try this
ok this does not compile any JS though
where do I tell my html to look for script
Copy code
<body>
    <canvas></canvas>
    <script src="???"></script>
</body>
e
_modulename_.js
like I just said, and as documented on https://kotlinlang.org/docs/running-kotlin-js.html#run-the-browser-target
r
oh gotcha sorry
is there not a way to change the project name in a config file
as opposed to IDE menus
e
is this the root project or a subproject?
r
root project
e
then it is 
rootProject.name
in 
settings.gradle(.kts)
.
but also I said the output filename is configurable in webpack settings, it does not need to be the same as the module name
r
right, thanks
e
Copy code
kotlin {
    js {
        browser {
            commonWebpackConfig {
                outputFileName = "whatever.js"
r
image.png
great, only issue is that intellij gets confused by the name
since the file does not exist yet
20 Views
Open in Slack
PreviousNext
Powered by