search

rjaros / kvision

Object oriented web framework for Kotlin/JS
https://kvision.io
MIT License
1.23k stars 65 forks source link

<app>.js not loaded after migrating to 5.1.1 ? #309

Closed joerg-rade closed 2 years ago

joerg-rade commented 3 years ago

index.html is fetched, but kroviz.js isn't displaying the burger button. What am I doing wrong?

https://github.com/apache/isis/blob/ISIS-2872/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/App.kt https://github.com/apache/isis/blob/ISIS-2872/incubator/clients/kroviz/build.gradle.kts

11:13:32: Executing task ' -t run'...

> Task :kotlinNodeJsSetup SKIPPED
> Task :kotlinNpmCachesSetup
> Task :packageJson UP-TO-DATE
> Task :rootPackageJson UP-TO-DATE
> Task :kotlinNpmInstall UP-TO-DATE
> Task :generateExternalsIntegrated SKIPPED
> Task :compileKotlinJs UP-TO-DATE
> Task :processResources UP-TO-DATE
> Task :mainClasses UP-TO-DATE
> Task :compileDevelopmentExecutableKotlinJs UP-TO-DATE
> Task :developmentExecutableCompileSync UP-TO-DATE
> Task :browserDevelopmentRun
> Task :run

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.7/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 1s
9 actionable tasks: 2 executed, 7 up-to-date

Waiting for changes to input files of tasks... (ctrl-d then enter to exit)
<i> [webpack-dev-server] [HPM] Proxy created: /kv  -> http://localhost:8080
<i> [webpack-dev-server] [HPM] Proxy created: /kvws  -> ws://localhost:8080
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.178.24:3000/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::b87d:900:f9c6:bbd]:3000/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\data\master\isis\incubator\clients\kroviz\build/processedResources/js/main' directory

ScreenShot 558 DevTools - localhost_3000_

rjaros commented 3 years ago

Any errors in the console?

joerg-rade commented 3 years ago

Ah - yes. Thanks for asking ...

[HMR] Waiting for update signal from WDS...
class.js?7f68:19 Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('[isis-logo-button-image, logo-button]') contains HTML space characters, which are not valid in tokens.
    at Array.updateClass (webpack-internal:///../../node_modules/snabbdom/modules/class.js:19:50)
    at createElm (webpack-internal:///../../node_modules/snabbdom/es/snabbdom.js:93:30)
    at createElm (webpack-internal:///../../node_modules/snabbdom/es/snabbdom.js:98:46)
    at createElm (webpack-internal:///../../node_modules/snabbdom/es/snabbdom.js:98:46)
    at createElm (webpack-internal:///../../node_modules/snabbdom/es/snabbdom.js:98:46)
    at createElm (webpack-internal:///../../node_modules/snabbdom/es/snabbdom.js:98:46)
    at createElm (webpack-internal:///../../node_modules/snabbdom/es/snabbdom.js:98:46)
    at createElm (webpack-internal:///../../node_modules/snabbdom/es/snabbdom.js:98:46)
    at addVnodes (webpack-internal:///../../node_modules/snabbdom/es/snabbdom.js:122:45)
    at updateChildren (webpack-internal:///../../node_modules/snabbdom/es/snabbdom.js:239:17)
updateClass @ class.js?7f68:19
createElm @ snabbdom.js?e5b4:82
createElm @ snabbdom.js?e5b4:87
createElm @ snabbdom.js?e5b4:87
createElm @ snabbdom.js?e5b4:87
createElm @ snabbdom.js?e5b4:87
createElm @ snabbdom.js?e5b4:87
createElm @ snabbdom.js?e5b4:87
addVnodes @ snabbdom.js?e5b4:111
updateChildren @ snabbdom.js?e5b4:228
patchVnode @ snabbdom.js?e5b4:255
updateChildren @ snabbdom.js?e5b4:181
patchVnode @ snabbdom.js?e5b4:255
patch @ snabbdom.js?e5b4:288
KVManager.patch_2s1j4a_k$ @ kroviz.js?af83:40648
Root.reRender_0_k$ @ kroviz.js?af83:70460
Widget.refresh_0_k$ @ kroviz.js?af83:54571
SimplePanel.addInternal_ui0tv2_k$ @ kroviz.js?af83:70894
SimplePanel.add_ui0tv2_k$ @ kroviz.js?af83:70920
App.start_sv8swh_k$ @ kroviz.js?af83:116136
Application.start_9m4gm1_k$ @ kroviz.js?af83:40433
startApplication$start @ kroviz.js?af83:40519
_no_name_provided__114.invoke_xfv2uo_k$ @ kroviz.js?af83:40546
eval @ kroviz.js?af83:40566
index.js?0118:519 [webpack-dev-server] Hot Module Replacement enabled.
index.js?0118:519 [webpack-dev-server] Live Reloading enabled.
DevTools failed to load source map: Could not load content for chrome-extension://benpolaabjjganjkmhbdppijcfimlgdb/vendors/purify.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://benpolaabjjganjkmhbdppijcfimlgdb/vendors/ally.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for chrome-extension://benpolaabjjganjkmhbdppijcfimlgdb/vendors/most.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Now I have a clue ...

rjaros commented 3 years ago

You are probably passing List<String> as className for one of your components.

rjaros commented 3 years ago

Some dynamic conversion probably.

joerg-rade commented 3 years ago

I've commented out logo buttons (for KVision and Isis) and I can see my burger button now, but the dropdown is missing ... no console output.

Next step is to remove FA icons from the DD.

rjaros commented 3 years ago

This is the error: https://github.com/apache/isis/blob/ISIS-2872/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/core/RoMenuBar.kt#L165

use classes.joinToString(" ") instead

rjaros commented 3 years ago

Some other places as well, e.g. https://github.com/apache/isis/blob/ISIS-2872/incubator/clients/kroviz/src/main/kotlin/org/apache/isis/client/kroviz/ui/core/RoStatusBar.kt#L131

Just find and replace all those classes.toString().

joerg-rade commented 3 years ago

Thanks for searching - found them too. I'll commit my changes. When the burger is pressed, no DD menu yet.

joerg-rade commented 3 years ago

What may be wrong, when I see

index.js?0118:529 [webpack-dev-server] Disconnected!
logger @ index.js?0118:529
eval @ index.js?0118:699
error @ index.js?0118:149
close @ index.js?7c2a:161
eval @ socket.js?2678:21

on the console and an exception occurs at line 3? 

      case LogType.error:
        if (!debug && loglevel > LogLevel.error) return;
        console.error.apply(console, _toConsumableArray(labeledArgs()));
        break;
joerg-rade commented 3 years ago

With 

fun main() {
    startApplication(::App, module.hot, panelsCompatibilityMode = true)
}

ScreenShot 559 kroViz - Google Chrome

rjaros commented 3 years ago

You should add modules initialization.

joerg-rade commented 2 years ago

Adding module initialization didn't solve the issue.

Although my package.json reads:

{
  "dependencies": {
    "bootstrap": "^4.6.0",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "snabbdom": "^0.6.9",
    "webpack": "^5.54.0"
  }
}

I get the messages:

 kvision-js-ir > css-loader@6.3.0" has unmet peer dependency "webpack@^5.0.0".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-js-ir > style-loader@3.3.0" has unmet peer dependency "webpack@^5.0.0".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-js-ir > imports-loader@3.0.0" has unmet peer dependency "webpack@^5.0.0".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-js-ir > less-loader@10.0.1" has unmet peer dependency "webpack@^5.0.0".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-js-ir > snabbdom-virtualize@0.7.0" has incorrect peer dependency "snabbdom@~0.6.6".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-kvision-bootstrap-select-js-ir > bootstrap-select@1.14.0-beta2" has unmet peer dependency "jquery@1.9.1 - 3".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-kvision-bootstrap-select-js-ir > bootstrap-select@1.14.0-beta2" has unmet peer dependency "bootstrap@>=3.0.0".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-kvision-bootstrap-upload-js-ir > bootstrap-fileinput@5.2.6" has unmet peer dependency "jquery@>= 1.9.0".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-kvision-bootstrap-upload-js-ir > bootstrap-fileinput@5.2.6" has unmet peer dependency "bootstrap@>= 3.0.0".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-kvision-bootstrap-datetime-js-ir > pc-bootstrap4-datetimepicker@4.17.51" has unmet peer dependency "bootstrap@^4.0.0-beta.2".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-kvision-bootstrap-datetime-js-ir > pc-bootstrap4-datetimepicker@4.17.51" has unmet peer dependency "jquery@^1.8.3 || ^2.0 || ^3.0".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-kvision-bootstrap-datetime-js-ir > pc-bootstrap4-datetimepicker@4.17.51" has unmet peer dependency "moment@^2.10".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-kvision-bootstrap-datetime-js-ir > pc-bootstrap4-datetimepicker@4.17.51" has unmet peer dependency "moment-timezone@^0.4.0 || ^0.5.0".
warning "workspace-aggregator-698e5075-862e-41c0-9df3-f8b21b463ec9 > kvision-kvision-bootstrap-datetime-js-ir > pc-bootstrap4-datetimepicker > bootstrap@4.6.0" has unmet peer dependency "popper.js@^1.16.1".
rjaros commented 2 years ago

These warnings are nothing to worry about. They are always there.

I pulled you sources and tried to run the app. I had to make two changes:

  1. To fix main menu I've changed buildMenuEntry like this:

    private fun buildMenuEntry(label: String, iconName: String, action: () -> Unit): Link {
    val icon = IconManager.find(iconName)
    return Link(label, icon = icon, className = "dropdown-item").onClick { e ->
        val at = Point(e.pageX.toInt(), e.pageY.toInt())
        UiManager.position = at
        action()
    }
}

  2. To fix event handling I've commented reading bootstrap from RoManagerBootstrap (it was loaded twice):

    //      io.kvision.require("bootstrap/dist/js/bootstrap.bundle.min.js")
//      io.kvision.require("awesome-bootstrap-checkbox")

With these changes the app seems to work (more or less ;-)

joerg-rade commented 2 years ago

Thanks 10^6