I can't seem to get my frontendBrowserTests to wor...

# multiplatform

[Gunslingor]

I can't seem to get my frontendBrowserTests to work, the frontendTests Work but it keeps complaining about node setup failed. Any thoughts?

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()

                        }
                    }
                }
            }
        }
    }
}

[Gunslingor]

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

[Ilya Goncharov [JB]]

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"))

[Gunslingor]

Yeah... I've kinda tried that

getByName("frontendTest") {
    kotlin.srcDir("test/frontend/kotlin")
    resources.srcDir("test/frontend/resources")
    dependencies {
        implementation(kotlin("test-js"))
        implementation(npm("three", "0.114.0"))
    }
}

[Gunslingor]

I wonder if I need a frontendBrowserTest somewhere to make this work

[Gunslingor]

gives the same error

[Gunslingor]

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%

[Gunslingor]

It doesnt see three js for some raison

[Gunslingor]

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...

[Gunslingor]

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!

[Ilya Goncharov [JB]]

Do you use @JsModule on your external declarations?
Or you include three to html explicitly via <script>?

[Gunslingor]

via script right now on the backend

[Gunslingor]

Thanks for that hint, I'll circle back and try to study js module annotation

[Gunslingor]

ktor is the backend, three.js is in src/frontend/resources

[Ilya Goncharov [JB]]

What external declarations do you use? Maybe I can check it?

[Gunslingor]

I search my project, the word external does not appear in it not sure what that is

[Ilya Goncharov [JB]]

What threejs-wrapper in yout project?

[Gunslingor]

All the dependancies I know about, want to keep it all in gradle:

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"))
    }
}

[Gunslingor]

That is a kotlin wrapper for threejs so you can use kotlin to write it

[Gunslingor]

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

[Gunslingor]

frontendBrowserTests... does that make sense?

[Gunslingor]

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

[Ilya Goncharov [JB]]

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

[Gunslingor]

okay thanks, a bit over my head

[Gunslingor]

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

[Gunslingor]

thought... didnt work

[Ilya Goncharov [JB]]

Yes, you can create karma.config.d folder in your project, and put js file with any name with next content

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

config.files.unshift(require('path').resolve(__dirname, "../../../processedResources/js/main/test.js"))

[Gunslingor]

hmmm

[Gunslingor]

it's multiplatform JS/JVM/Common basically

[Gunslingor]

I guess this would be the correct path then copyied from IDE?

build/js/packages/FL-frontend/kotlin-dce/FL-frontend.js

[Ilya Goncharov [JB]]

But you need provide path to three.js in this file

[Gunslingor]

to three, okay, that currently ends up in build/distributions/libs/js

[Ilya Goncharov [JB]]

If it is in resources, it should be in build/processedResources too

[Gunslingor]

Is this right?

[Ilya Goncharov [JB]]

File should called *.js so config.js
And fix path please, it should be

../../../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

[Gunslingor]

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

[Ilya Goncharov [JB]]

Do you have sample of this project?

[Gunslingor]

well darn it: https://github.com/markaren/three.kt/issues/49

[Gunslingor]

I don't think I can use that, need to use three.js

[Gunslingor]

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.

[Gunslingor]

crap that wasn't even the right project, lol: https://github.com/markaren/three-kt-wrapper

[Gunslingor]

it's 4AM here, 5 hours on this problem is insaine, lol. I think its time for bed.,

[Gunslingor]

THanks for all the help man, need to figure out another way to do this I guess... or disable browser tests.

[Gunslingor]

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

[Ilya Goncharov [JB]]

No problem, I think, we are close to solution

[Gunslingor]

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:

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

[Gunslingor]

https://github.com/gamestdio/three-text2d/issues/5

Feels related

[Gunslingor]

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

[Ilya Goncharov [JB]]

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

[Gunslingor]

yes I think that task comoes from moo

[Gunslingor]

ok... lol... nodejs is still in the gradle intellij plugin and node disappeared, so confirmed... and nodejs comes from elsewhere then

[Gunslingor]

So your saying this is the correct task then? Task :kotlinNodeJsSetup SKIPPED

[Gunslingor]

its skipped whenever it runs for some reason

[Ilya Goncharov [JB]]

Yes, it is skipped, because it is downloaded once, and saved in home directory

[Gunslingor]

Thanks that makes sense, was actually just learning that by experimenting with deleting the .gradle/nodejs folder in the home dir

[Gunslingor]

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????

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"))
    }
}