https://kotlinlang.org logo
Join Slack
Powered by
Hey all. Trying very hard to get react-hot-loader ...
# javascript
a
Hey all. Trying very hard to get react-hot-loader working with KotlinJs. Anybody managed to do that? I am always getting error "Cannot call a class as a function" 😞
a
does kotlin js not have hot reloading?
a
not really. It always refreshes the full page and it takes forever. I am working off the official example: https://github.com/Kotlin/kotlin-full-stack-application-demo
e.g. just changing some text on the page takes ~ 20 seconds to recompile and then reload the page
Screen recording to show what the developer experience is. Really not good at all
nothot.mp4
r
a
The 
kotlin-frontend
plugin never had this issue at all
t
сс @Ilya Goncharov [JB]
a
Got react-hot-reload to start and not cause any errors. it also does not do a full page reload as my console logs stay and I have not enabled preserve logs over reloads option in the dev console. but it reloads the entire app and all react component state is lost [WDS] App updated. Recompiling... [WDS] App updated. Recompiling... [WDS] App updated. Recompiling... [WDS] App updated. Recompiling... [WDS] App hot update... [HMR] Checking for updates on the server... [WDS] App hot update... [HMR] Updated modules: [HMR] - ./frontend.js [HMR] App is up to date.
at least it's now reliably reloading my app with the changes, without any errors in between and without me having to do anything manually
for comparison - this is how it should work
ts-react-hot-reload.mp4
a
Please share how you made it work. Might come in handy
a
Well I wouldn't call it working. But it's at least better than before as the app reload works reliably at least and it does not cause a real browser reload, just an app reload. Any code change takes 30 seconds to compile, bundle and reflect on the page and the entire react state is lost. Also, I don't know whether all of these pieces I added are actually picked up. But this is what I did so far: 1 - Created a wrapper for react-hot-loader:
Copy code
@file:JsModule("react-hot-loader/root")

package reacthotloader

@JsName("hot")
external fun hot(component: dynamic)
2 - Added dependencies to react-hot-loader and hot-loader/react-dom (instead of the actual react-dom) in the build.gradle.kts of the frontend module:
Copy code
dependency("react-hot-loader")
dependency("@hot-loader/react-dom", reactVersion)
3 - Added .babelrc to the root of the project (no clue whether this is actually being picked up)
Copy code
{
  "plugins": [
    "react-hot-loader/babel"
  ]
}
4 - Added frontend/webpack.config.d/react-hot-loader.js
Copy code
config.resolve.alias = {
    'react-dom': '@hot-loader/react-dom'
};
5 - Wrap the root react component with hot function
Copy code
fun RBuilder.application() = child(Application::class) {
}

fun main() {
    render(document.getElementById("content")) {
        hot(application())
    }
}
6 - And I have a frontend/webpack.config.d/babel.js looking like this:
Copy code
config.module.rules.push({
    test: /\.jsx?$/,
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
});
a
I will try it out and see if it'll give me any improvements
a
I completely deleted my babel file. Now the compilation / reload cycle is down from 30 seconds to 5 seconds. I don't know what the Babel thing even does exactly when used in the KotlinJS project. Does not seem to make a difference at first glance ...
a
From the looks, the babel file helps to interop with jsx. That is if you are writing plain jsx
2 Views
Open in Slack
PreviousNext
Powered by