Not working on Kotlin 1.4.0

[krzema12]

I get no compile-time errors, but a runtime one in the browser console:

TypeError: e.child_2usv9w$ is not a function
    cr Base.kt:50
    vc Icon.kt:40
    gt kotlin-wrappers-kotlin-react-jsLegacy.js:250
    sr Base.kt:22
    mg.mExpansionPanel_2s8yu5$/< ExpansionPanel.kt:35
    cr Base.kt:49
    mExpansionPanel_2s8yu5$ ExpansionPanel.kt:30
    gt Player.kt:124
    sr Base.kt:22
    fg.mPaper_1l6flt$/< Paper.kt:41
    cr Base.kt:49
    mPaper_1l6flt$ Paper.kt:35
    render_ss14n$ Player.kt:70
    render kotlin-wrappers-kotlin-react-jsLegacy.js:220
    j kotlin-wrappers-kotlin-react-jsLegacy.js:140
    render kotlin-wrappers-kotlin-react-jsLegacy.js:225
    React 12
    render_2955dm$ kotlin-wrappers-kotlin-react-dom-jsLegacy.js:145
    Lt main.kt:8
    <anonymous> web.js:53
    <anonymous> web.js:53
    Webpack 7
react-dom.production.min.js:209:194
Uncaught TypeError: e.child_2usv9w$ is not a function
    cr Base.kt:50
    vc Icon.kt:40
    gt kotlin-wrappers-kotlin-react-jsLegacy.js:250
    sr Base.kt:22
    mg.mExpansionPanel_2s8yu5$/< ExpansionPanel.kt:35
    cr Base.kt:49
    mExpansionPanel_2s8yu5$ ExpansionPanel.kt:30
    gt Player.kt:124
    sr Base.kt:22
    fg.mPaper_1l6flt$/< Paper.kt:41
    cr Base.kt:49
    mPaper_1l6flt$ Paper.kt:35
    render_ss14n$ Player.kt:70
    render kotlin-wrappers-kotlin-react-jsLegacy.js:220
    j kotlin-wrappers-kotlin-react-jsLegacy.js:140
    render kotlin-wrappers-kotlin-react-jsLegacy.js:225
    React 12
    render_2955dm$ kotlin-wrappers-kotlin-react-dom-jsLegacy.js:145
    Lt main.kt:8
    <anonymous> web.js:53
    <anonymous> web.js:53
    Webpack 7
Base.kt:50:27

See my working branch: https://github.com/krzema12/fsynth/commits/1.4.0 (just bumping Kotlin to 1.4.0 and React wrappers to pre.112 is truly meaningful there and enough to reproduce).

I compared if Kotlin JS and Kotlin-React work fine if there's no Muirwik (using my custom Material UI wrappers), and they do. See https://github.com/krzema12/fsynth/commits/1.4.0-without-muirwik

I tried to track down what's the problem, but I failed. Source maps don't load in my browser which is also weird. I only managed to find out that not using Muirwik makes the app work fine on 1.4.0.

Could you check it out?

Thanks,
Piotr

[cfnz]

Seems to work OK for me in 1.4 when using the default (Legacy) compiler.

Using the new Alpha IR compiler is when it has issues. Were you using the IR compiler when you had the issue?

[krzema12]

No, the default non-IR one. Please see this commit: fsynthlib/fsynth@2a203fb This is the minimal set of changes to enable 1.4.0, and it reproduces the issue.

To reproduce, check out the above commit, call gradle :web:build and open web/build/distributions/index.html. There should be a white page with the above stack traces in the JS console.

[cfnz]

Pushed my Kotlin 1.4 version (v0.6) which works for me. Seems pretty similar to what you had, so don't know...

[krzema12]

Thanks, confirmed it works fine so far! (fsynthlib/fsynth@536e5a4) From my point of view, this issue can be resolved.

Note: keep it mind that Muirwik v0.6 is not compatible with Kotlin earlier than 1.4.0, so you're forcing all clients wanting to use v0.6+ it to migrate to 1.4.0. It's probably fine for a moving-fast kind of project.

[christian-draeger]

hey i am also not able to get it work.

i'm using kotlin 1.4.0 in multiplattform project. do you have any hint what i'm doing wrong?
my build.gradle.kts looks as follows (kotlin version is inherit and 1.4.0):

plugins {
    kotlin("js")
}

repositories {
    maven("https://dl.bintray.com/cfraser/muirwik")
}

dependencies {
    implementation(project(":shared"))
    implementation("org.jetbrains:kotlin-react:16.13.1-pre.110-kotlin-1.4.10")
    implementation("org.jetbrains:kotlin-react-dom:16.13.1-pre.110-kotlin-1.4.10")
    implementation("org.jetbrains:kotlin-styled:1.0.0-pre.110-kotlin-1.4.10")
    implementation(npm("react", "16.13.1"))
    implementation(npm("react-dom", "16.13.1"))
    implementation(npm("styled-components", "5.1.1"))
    implementation("com.ccfraser.muirwik:muirwik-components:0.6.0")
    implementation(npm("@material-ui/core", "^4.9.14"))
}

kotlin {
    js {
        browser {
            webpackTask {
                cssSupport.enabled = true
            }

            runTask {
                cssSupport.enabled = true
            }

            testTask {
                useKarma {
                    useChromeHeadless()
                    webpackConfig.cssSupport.enabled = true
                }
            }
        }
    }
}

when i run my app using a muirwik component i get following error in the browsers console (which leads to complete crash of my react app):

muirwik-muirwik-components.js:14397 Uncaught Error: Cannot find module 'kotlin-extensions'
    at webpackMissingModule (muirwik-muirwik-components.js:14397)
    at eval (muirwik-muirwik-components.js:14397)
    at Object../kotlin-dce-dev/muirwik-muirwik-components.js (admin.js:6321)
    at __webpack_require__ (admin.js:30)
    at eval (mobility-dashboard-admin.js:3)
    at eval (mobility-dashboard-admin.js:8)
    at Object../kotlin-dce-dev/mobility-dashboard-admin.js (admin.js:6310)
    at __webpack_require__ (admin.js:30)
    at Object.0 (admin.js:6333)
    at __webpack_require__ (admin.js:30)
client?f283:52 [WDS] Live Reloading enabled.
client?f283:150 [WDS] Errors while compiling. Reload prevented.
errors @ client?f283:150
client?f283:159 ./kotlin-dce-dev/muirwik-muirwik-components.js
Module not found: Error: Can't resolve 'kotlin-extensions' in '/Users/christiandrager/Projects/mobility-dashboard-backend/build/js/packages/mobility-dashboard-admin/kotlin-dce-dev'
errors @ client?f283:159
client?f283:159 ./kotlin-dce-dev/muirwik-muirwik-components.js
Module not found: Error: Can't resolve 'kotlin-react' in '/Users/christiandrager/Projects/mobility-dashboard-backend/build/js/packages/mobility-dashboard-admin/kotlin-dce-dev'
errors @ client?f283:159
client?f283:159 ./kotlin-dce-dev/muirwik-muirwik-components.js
Module not found: Error: Can't resolve 'kotlin-styled' in '/Users/christiandrager/Projects/mobility-dashboard-backend/build/js/packages/mobility-dashboard-admin/kotlin-dce-dev'
errors @ client?f283:159
client?f283:159 ./kotlin-dce-dev/muirwik-muirwik-components.js
Module not found: Error: Can't resolve 'kotlin-wrappers-kotlin-css' in '/Users/christiandrager/Projects/mobility-dashboard-backend/build/js/packages/mobility-dashboard-admin/kotlin-dce-dev'
errors @ client?f283:159

without using muirwik everything works just fine

since i'm new to kotlinJS i see the error is saying 'Cannot find module 'kotlin-extensions'' but don't know how to fix it :D

Further question:

is it needed to have material-ui as a dependency? i'm wondering why the wrappers like muirwik but also the jetbrains ones like for react are not coming with corresponding stuff that is needed anyway as transitive dependency?

[cfnz]

You could have a look at the separate starter project as an example and see if that works for you.

For 0.6.0 I use pre.112-kotlin-1.4.0 versions which might be important.

And no, you shouldn't need material-UI as a direct dependency now-a-days.

[christian-draeger]

thx, changing to pre.112-kotlin-1.4.0 works :)

[jpink]

The Kotlin JS IR compiler is stable since Kotlin 1.5.0 but I can't get Muirwik running on it.

With js(IR) it says Unresolved reference: com for import com.ccfraser.muirwik.components.*.
With js(LEGACY) it is working fine.

Is there anything you @cfnz can do or should we report it to YouTrack?

[cfnz]

This is a known problem with the Kotlin wrappers and the IR compiler, there is also a known work around.

The readme talks about the IR compiler... there is a special IR Branch that includes the work arounds... Sometime soon I will look at merging it into master as it doesn't seem like things are going to change, but in the short term you could try and use that branch.

[cfnz]

I have locally merged the IR branch into my master last week and will release it after a bit more testing.

At the moment, legacy is still the way to go for development as the IR compiler is still in Alpha and doesn't support incremental compilation... so the edit rebuild process is way slower using the IR compiler... For a release, I have not compared bundle size, so still plan to do that...

So, yes, js(LEGACY) is still needed, and I would say recommended (for now), for development work flow at least.