Hello all, We have a KMM project which contains w...

# javascript

[Rhiad Jaffar]

Hello all,

We have a KMM project which contains web (React) components built using Kotlin (compiled to js using Kolin/JS of course).

We created the web app using the ‘New Application’ > ‘Kotlin’ > ‘React Application’ from IntelliJ.

All works okay but with every change we make in the web app the build kicks off and takes around 30 seconds to complete before doing a complete page refresh. This of course does not keep state so aside from the build time means we have to re-navigate/recreate the state from scratch manually to dev/test.

We have tried many different solutions to get react ‘hot reload’ or react ‘fast refresh’ working using various configurations - quite a few from the discussions in this channel - but have hit a brick wall and nothing we try seems to work (possibly because Kotlin/JS has moved on quite a bit in the past year).

Has anyone managed to get either react ‘hot reload’ or react ‘fast refresh’ working (when writing react components in Kotlin) recently using the IR compiler and if so what settings/code did you use please e.g. in webpack and in main or components in your kotlin code.

Many thanks!

[turansky]

IR compiler - requirement?

[Robert Jaros]

Have you tried this option?
https://github.com/rjaros/kvision-examples/blob/master/template/webpack.config.d/webpack.js#L4

[Rhiad Jaffar]

Thanks both!

IR compiler - requirement?

Not a requirement as such - just trying to use IR compiler instead of Legacy compiler as we are aware the Legacy compiler will likely be depreated at some point and trying to stay ahead of the game.

Have you tried this option?

https://github.com/rjaros/kvision-examples/blob/master/template/webpack.config.d/webpack.js#L4

Not tried this one yet - will give that a go and feed back soon thank you!

[turansky]

Yes, Legacy will be deprecated, but IR has no fine incremental compilation right now

[turansky]

And if talk about hot reload - Legacy - single fine solution right now

[turansky]

If it’s not “Hello world” app

[Rhiad Jaffar]

Ah okay thank you Victor - this does explain a lot then thank you. Much appreciated. 👍🏼

[Rhiad Jaffar]

@Robert Jaros Just been looking at your examples and can see the HMR working! It is saving state and takes around 7 seconds in total - much snappier than the 30 seconds we’ve been seeing so far! And all using the IR compiler.

We were pretty close actually and had the config.devServer.hot and config.devtool and similar module.hot implementation with what we had but it was this which was the clincher:
https://github.com/rjaros/kvision-examples/blob/master/template/build.gradle.kts#L32

Looks like overriding default devServer seems to have done the trick.

Either way - very big thank you!

Also - some really great stuff in kvision and the examples are really great! 👍🏼 🙇🏼 👏🏼

Thanks again.

[Gabriel Duncan]

hmm. I tried this and now my script isn’t even being compiled when i run `jsBrowserDevelopmentRun`` @Rhiad Jaffar did you run into that atll?

[Gabriel Duncan]

*at all

[Rhiad Jaffar]

Hi @Gabriel Duncan there’s quite a few places you need to ensure you have the right thing set up - I’ll use the example above to illustrate:

runTask and webpackTask here:
https://github.com/rjaros/kvision-examples/blob/master/template/build.gradle.kts#L29

Resources being included (if you have e.g. index.html file outside the resources folder like in the example):
https://github.com/rjaros/kvision-examples/blob/master/template/build.gradle.kts#L63

Webpack devServer config - adds hot reload and devtool js map config:
https://github.com/rjaros/kvision-examples/blob/master/template/webpack.config.d/webpack.js

Some kind of module.hot implementation (kvision provides this for you but you can roll your own):

HMR external interface:
https://github.com/rjaros/kvision/blob/6453b9fa60500f51ca786fb036a8d7ddc50435ea/src/main/kotlin/io/kvision/HMR.kt#L39

startApplication wrapper which adds HMR:
https://github.com/rjaros/kvision/blob/51d7f4cf0acb5d777ce1198ad885b5da8b548dca/src/main/kotlin/io/kvision/Application.kt#L64

Example of how/where startApplication is used:
https://github.com/rjaros/kvision-examples/blob/master/template/src/main/kotlin/com/example/App.kt#L37

Do you have all of these implemented?

[Gabriel Duncan]

Definitely not. Thanks so much for sharing all that. I'll get those in and see if I can make progress. This is awesome!