slinky-hot prevents to load pages in Scala 3

[KapStorm]

We are migrating our Slinky project from Scala 2 to Scala 3 and we have problems when we initialize slinky-hot, causing pages to fail to load and print console.errors in the browser console

To reproduce this we are calling hot.initialize() in the Main file. Removing hot.initialize() solves the load problem

Our project in the scala 3 branch https://github.com/wiringbits/scala-webapp-template/tree/scala3

Browser console errors

Main.scala

@JSImport("js/index.css", JSImport.Default)
@js.native
object IndexCSS extends js.Object

object Main {
  val css = IndexCSS

  def main(argv: Array[String]): Unit = {
    if (LinkingInfo.developmentMode) {
      hot.initialize()
    }

    val scheduler = monix.execution.Scheduler.global
    val $authState = Var[AuthState](AuthState.Unauthenticated)(scheduler)
    val $lang = Var[I18nLang](I18nLang.English)(scheduler)
    val ctx = AppContext(
      API(),
      $authState,
      $lang,
      Email.trusted("[email protected]"),
      "+52 (999) 9999 999",
      org.scalajs.macrotaskexecutor.MacrotaskExecutor
    )
    val app = ErrorBoundaryComponent(
      ErrorBoundaryComponent.Props(
        child = App.component(App.Props(ctx)),
        renderError = e => ErrorBoundaryInfo(e)
      )
    )

    ReactDOM.render(app, dom.document.getElementById("root"))
  }
}

[KapStorm]

Looking at the issues I found the same issue: #547

[shadaj]

Interesting, which version of Slinky are you using? You seem to be running into the exact same issue, but it should be fixed in the latest release.

[AlexITC]

0.7.3 (ref), my understanding is that the issue should be fixed in this version.

[shadaj]

That is very strange, might be some weird interaction between the proxied hot-reloading class. I'll try to test locally when I get a chance, might be a bit before I can get to it though unfortunately.

In the meantime, is using React Refresh via https://github.com/pmmmwh/react-refresh-webpack-plugin an option? It does miss out on preserving component state but that's what I use via Next for the docs site. The current hot reloading support depends on a very old library, so might be worth investing in Refresh for the future.

[AlexITC]

In the meantime, is using React Refresh via https://github.com/pmmmwh/react-refresh-webpack-plugin an option?

We could give it a try, we don't preserve component state because we use functional components.

Thanks for the hint.