https://kotlinlang.org logo
#multiplatform
Title
# multiplatform
g

Gunslingor

03/24/2020, 6:17 AM
I can't seem to get my frontendBrowserTests to work, the frontendTests Work but it keeps complaining about node setup failed. Any thoughts?
Copy code
js("frontend") {
    compilations {
        create(environment) {
            browser {
                tasks {
                    val backendJar by getting {
                        dependsOn("frontendBrowserWebpack")
                    }
                    webpackTask {
                        setProperty("mode", environment)
                        //sourceMaps = false // Set 'true' if need debug
                        //report = true // Enable execute tests src/jsTest
                    }
                    testTask {
                        dependsOn("backendJar", "npmInstall")
                        useKarma {
                            //useIe()
                            //useSafari()
                            //useFirefox()
                            //useChrome()
                            //useChromeCanary()
                            useChromeHeadless()
                            //usePhantomJS()
                            //useOpera()

                        }
                    }
                }
            }
        }
    }
}
Strange webpack errors or node errors... not sure why node is even involved if this is for the browser. BTW I'm probably doing something wrong ATM, I have three.js in my frontend Resources fodler, both in main and testing now... I suspect that's really supposed to come from node somehow? 93% after chunk asset optimization SourceMapDevToolPlugin 93% asset optimization 94% after asset optimization 94% after seal 95% emitting 98% after emitting 100% ReferenceError: THREE is not defined at Object.<anonymous> (C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js76725:15) at C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js76694:37 at Object.../FL-frontend/kotlin/FL-frontend.js (C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js76697:2) at __webpack_require__ (c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/webpack/bootstrap19:1 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js20:30) at C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js77277:235 at Object../kotlin/FL-frontend-test.js (C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js77282:2) at __webpack_require__ (c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/webpack/bootstrap19:1 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js20:30) at Object../adapter-browser.js (c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js2:18 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js77263:18) at __webpack_require__ (c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/webpack/bootstrap19:1 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js20:30) at c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/webpack/bootstrap83:1 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js84:18
Task :frontendBrowserTest FAILED
FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':frontendBrowserTest'.
command 'C:\Users\gunsl\.gradle\nodejs\node-v12.14.0-win-x64\node.exe' exited with errors (exit code: 1)
* Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 7s 8 actionable tasks: 1 executed, 7 up-to-date
i

Ilya Goncharov [JB]

03/24/2020, 7:02 AM
Webpack run in node environment, when tries to build browser compatible bundle You can declre threejs as a npm dependency with for example
implementation(npm("three", "0.114.0"))
g

Gunslingor

03/24/2020, 7:26 AM
Yeah... I've kinda tried that
Copy code
getByName("frontendTest") {
    kotlin.srcDir("test/frontend/kotlin")
    resources.srcDir("test/frontend/resources")
    dependencies {
        implementation(kotlin("test-js"))
        implementation(npm("three", "0.114.0"))
    }
}
I wonder if I need a frontendBrowserTest somewhere to make this work
gives the same error
It sees webpack, I mean I see this huge thing in the output: 93% after chunk asset optimization SourceMapDevToolPlugin 93% after chunk asset optimization SourceMapDevToolPlugin 93% after chunk asset optimization SourceMapDevToolPlugin ..\adapter-browser.js generate SourceMap 93% after chunk asset optimization SourceMapDevToolPlugin resolve sources 93% after chunk asset optimization SourceMapDevToolPlugin ..\adapter-browser.js attach SourceMap 93% after chunk asset optimization SourceMapDevToolPlugin 93% asset optimization 94% after asset optimization 94% after seal 95% emitting 98% after emitting 100%
It doesnt see three js for some raison
I see three and threejs-wrapper in the folder, under build/js/node_modules. tried configuring the node plugin thingy for the nodeModulesDir but that broke more I think.... or had no effect...
I've noticed for a long time no matter what I try three.js never makes it to rhe kotlin-dce folder but threejs-wrapper.js which is a kotlin wrapper does make it there, been this way for monmths, that's why I ended up just putting it in resources folder which is probably why this is breaking now, lol... any help is appreciated!
i

Ilya Goncharov [JB]

03/24/2020, 7:39 AM
Do you use
@JsModule
on your external declarations? Or you include
three
to
html
explicitly via
<script>
?
g

Gunslingor

03/24/2020, 7:40 AM
via script right now on the backend
Thanks for that hint, I'll circle back and try to study js module annotation
ktor is the backend, three.js is in src/frontend/resources
i

Ilya Goncharov [JB]

03/24/2020, 7:41 AM
What external declarations do you use? Maybe I can check it?
g

Gunslingor

03/24/2020, 7:43 AM
I search my project, the word external does not appear in it not sure what that is
i

Ilya Goncharov [JB]

03/24/2020, 7:44 AM
What
threejs-wrapper
in yout project?
g

Gunslingor

03/24/2020, 7:44 AM
All the dependancies I know about, want to keep it all in gradle:
Copy code
getByName("commonMain") {
    kotlin.srcDir("src/common/kotlin")
    resources.srcDir("src/common/resources")
    dependencies {
        implementation(kotlin("stdlib-common", version = kotlinVersion))
        implementation(kotlin("gradle-plugin", version = kotlinVersion))
        implementation("org.jetbrains.kotlinx:kotlinx-html-common:$kotlinxHtmlVersion")
    }
}
getByName("backendMain") {
    kotlin.srcDir("src/backend/kotlin")
    resources.srcDir("src/backend/resources")
    dependencies {
        implementation(kotlin("stdlib-jdk8"))
        implementation("io.ktor:ktor-server-core:$ktorVersion")
        implementation("io.ktor:ktor-server-netty:$ktorVersion")
        implementation("io.ktor:ktor-html-builder:$ktorVersion")
        implementation("org.jetbrains.kotlinx:kotlinx-html-jvm:$kotlinxHtmlVersion")

        implementation("ch.qos.logback:logback-classic:$logbackVersion")
    }
}
getByName("frontendMain") {
    kotlin.srcDir("src/frontend/kotlin")
    resources.srcDir("src/frontend/resources")
    dependencies {
        implementation(kotlin("stdlib-js"))
        implementation("com.github.markaren:three-kt-wrapper:v0.88-ALPHA-7")
        implementation("org.jetbrains.kotlinx:kotlinx-html-js:$kotlinxHtmlVersion")
        implementation(npm("three", "0.114.0"))
    }
}
getByName("commonTest") {
    kotlin.srcDir("test/common/kotlin")
    resources.srcDir("test/common/resources")
    dependencies {
        implementation(kotlin("test-common", version = kotlinVersion))
        implementation(kotlin("test-annotations-common", version = kotlinVersion))
    }
}
getByName("backendTest") {
    kotlin.srcDir("test/backend/kotlin")
    resources.srcDir("test/backend/resources")
    dependencies {
        implementation(kotlin("test"))
        implementation(kotlin("test-junit"))
    }
}
getByName("frontendTest") {
    kotlin.srcDir("test/frontend/kotlin")
    resources.srcDir("test/frontend/resources")
    dependencies {
        implementation(kotlin("test-js"))
        implementation(npm("three", "0.114.0"))
    }
}
That is a kotlin wrapper for threejs so you can use kotlin to write it
works when I run it, it works when I run back tests and front end tests, it just fails when I run Frontend BRowser Tests
frontendBrowserTests... does that make sense?
All kind of crazy output: HeadlessChrome 80.0.3987 (Windows 10.0.0) ERROR Uncaught ReferenceError: THREE is not defined at C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js76725:15 ReferenceError: THREE is not defined at Object.<anonymous> (C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js76725:15) at C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js76694:37 at Object.../FL-frontend/kotlin/FL-frontend.js (C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js76697:2) at __webpack_require__ (c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/webpack/bootstrap19:1 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js20:30) at C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js77277:235 at Object../kotlin/FL-frontend-test.js (C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js77282:2) at __webpack_require__ (c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/webpack/bootstrap19:1 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js20:30) at Object../adapter-browser.js (c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js2:18 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js77263:18) at __webpack_require__ (c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/webpack/bootstrap19:1 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js20:30) at c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/webpack/bootstrap83:1 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js84:18
Task :frontendBrowserTest FAILED
i

Ilya Goncharov [JB]

03/24/2020, 7:54 AM
Okay, I see. It is about
three-kt-wrapper
frontendBrowserTests... does that make sense?
In fact it tries to build your javascript file with all dependencies inside. But in
three-kt-wrapper
threejs is external non module class It makes sense, if you want to run your tests in browser I’ll check, if you can include custom script to tests
g

Gunslingor

03/24/2020, 7:57 AM
okay thanks, a bit over my head
I think I could just put three.min.js isn resources forlder to solve this, it fixed it in frontendMain but still leearning node and hope to pull it front there eventually
thought... didnt work
i

Ilya Goncharov [JB]

03/24/2020, 8:08 AM
Yes, you can create
karma.config.d
folder in your project, and put js file with any name with next content
Copy code
config.files.unshift(require('path').resolve(__dirname, "../../../../base/build/processedResources/js/main/test.js"))
Path is relative, and you need to set it with base of
root-build/js/packages/module-test
So if you have multi-module project, it is similar with my sample If it is single module project, you may get rid of several levels Something like
Copy code
config.files.unshift(require('path').resolve(__dirname, "../../../processedResources/js/main/test.js"))
g

Gunslingor

03/24/2020, 8:09 AM
hmmm
it's multiplatform JS/JVM/Common basically
I guess this would be the correct path then copyied from IDE? build/js/packages/FL-frontend/kotlin-dce/FL-frontend.js
i

Ilya Goncharov [JB]

03/24/2020, 8:11 AM
But you need provide path to
three.js
in this file
g

Gunslingor

03/24/2020, 8:13 AM
to three, okay, that currently ends up in build/distributions/libs/js
i

Ilya Goncharov [JB]

03/24/2020, 8:17 AM
If it is in resources, it should be in
build/processedResources
too
g

Gunslingor

03/24/2020, 8:17 AM
Is this right?
i

Ilya Goncharov [JB]

03/24/2020, 8:20 AM
File should called
*.js
so
config.js
And fix path please, it should be
Copy code
../../../processedResources/js/main/three.min.js
or you can try to use one from
dirstibutions
, but this folder should be created after task
distributeResources
and there is no guarantee, that it would be run before tests
g

Gunslingor

03/24/2020, 8:22 AM
I feel like its had an effect to but still not 100% working, like its an intermittent issue or something. ATM with your changes I get what seems to be a suddessful build with many of the exact same error messages about missing three.js or webpack doing it's thing above... I feel like playing with gradle config had a similar effect.. I know for certain I pressed all Test a minute ago and it work: est.js (C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js77282:2) at __webpack_require__ (c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/webpack/bootstrap19:1 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js20:30) at Object../adapter-browser.js (c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js2:18 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js77263:18) at __webpack_require__ (c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/webpack/bootstrap19:1 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js20:30) at c/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/webpack/bootstrap83:1 <- C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js84:18 java.lang.IllegalStateException: command 'C:\Users\gunsl\.gradle\nodejs\node-v12.14.0-win-x64\node.exe' exited with errors (exit code: 1)
Task :frontendTest UP-TO-DATE
Task :allTests UP-TO-DATE
BUILD SUCCESSFUL in 8s further up HeadlessChrome 80.0.3987 (Windows 10.0.0) ERROR Uncaught ReferenceError: THREE is not defined at C/Users/gunsl/IdeaProjects/FL/build/js/packages/FL frontend test/adapter browser.js76725:15 ReferenceError: THREE is not defined
i

Ilya Goncharov [JB]

03/24/2020, 8:24 AM
Do you have sample of this project?
g

Gunslingor

03/24/2020, 8:29 AM
I don't think I can use that, need to use three.js
I don't know, seems to work when I run it. Do you want me to send you this project? I can in a private chat its just template stuff.
crap that wasn't even the right project, lol: https://github.com/markaren/three-kt-wrapper
it's 4AM here, 5 hours on this problem is insaine, lol. I think its time for bed.,
THanks for all the help man, need to figure out another way to do this I guess... or disable browser tests.
man... you know... I know that browser tests can pass in an intellij template, the gradle-kotlin jvm/js template. The only difference is they aren't using any resource files or three... anyway sorry for taking your time I'm off to bed
i

Ilya Goncharov [JB]

03/24/2020, 8:39 AM
No problem, I think, we are close to solution
g

Gunslingor

03/24/2020, 5:07 PM
I often get this error:
* What went wrong:
Execution failed for task ':frontendBrowserTest'.
> command 'C:\Users\gunsl\.gradle\nodejs\node-v12.14.0-win-x64\node.exe' exited with errors (exit code: 1)
when I add this:
Copy code
testTask {
    dependsOn("npmInstall")
    useKarma {
There error changes to this:
Execution failed for task ':nodeSetup'.
> Could not resolve all files for configuration ':detachedConfiguration1'.
> Could not find org.nodejs:node:10.16.0.
Note the different version numbders, isnt that wierd
This has something to do with the difference between node and nodejs in the node gradle plugin I think.
> command 'C:\Users\gunsl\.gradle\nodejs\node-v12.14.0-win-x64\node.exe' exited with errors (exit code: 1)
a common reoccurring error, but that folder doesn't exist. When I run the presumably related kotlinNodeJsSetup task it says
Task :kotlinNodeJsSetup SKIPPED
i

Ilya Goncharov [JB]

03/24/2020, 6:36 PM
What is
npmInstall
task? Is it from
com.moowork.node
plugin? Now kotlin-gradle-plugin can work with node and do install of modules with its own
g

Gunslingor

03/24/2020, 6:37 PM
yes I think that task comoes from moo
ok... lol... nodejs is still in the gradle intellij plugin and node disappeared, so confirmed... and nodejs comes from elsewhere then
So your saying this is the correct task then? Task :kotlinNodeJsSetup SKIPPED
its skipped whenever it runs for some reason
i

Ilya Goncharov [JB]

03/24/2020, 8:02 PM
Yes, it is skipped, because it is downloaded once, and saved in home directory
g

Gunslingor

03/24/2020, 8:06 PM
Thanks that makes sense, was actually just learning that by experimenting with deleting the .gradle/nodejs folder in the home dir
So what's the right way to serve up node dependacies? This doesn't work, the only thing that ever worked was to put three.js in resources and like via script...hmmm... does the script tag need to change????
Copy code
getByName("frontendMain") {
    kotlin.srcDir("src/frontend/kotlin")
    resources.srcDir("src/frontend/resources")
    dependencies {
        implementation(kotlin("stdlib-js"))
        implementation("com.github.markaren:three-kt-wrapper:v0.88-ALPHA-7")
        implementation("org.jetbrains.kotlinx:kotlinx-html-js:$kotlinxHtmlVersion")
        implementation(npm("three", "0.114.0"))
    }
}
9 Views