Error rendering component with React.Suspense

Got an error with React.Suspense (React 16.7.0). Am I missing something?

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._
import org.scalajs.dom

object App {

  def main(args: Array[String]): Unit = {

    def body = {
      val main = AsyncCallback
        .pure(<.div(^.color := "#070", "Async load complete."))
        .delayMs(2000)

      React.Suspense(
        fallback = <.div(^.color.red, "Loading..."),
        asyncBody = main
      )
    }

    val Main =
      ScalaComponent
        .builder[Unit]("Main")
        .stateless
        .render_(<.div(^.fontSize := "175%", body))
        .build

    val container = dom.document.getElementById("root")
    Main().renderIntoDOM(container)
  }
}

Browser stack trace:

Replication repo: https://github.com/allantl/scalajs-react-suspense

[teozkr]

This is because japgolly.scalajs.react.raw.Suspense is defined like this:

@JSImport("react", JSImport.Namespace, "React.Suspense")
@js.native
object Suspense extends js.Any

According to the documentation for the relevant overload of JSImport:

Namespace import (import the module itself), with a fallback on a global variable.
When linking with module support, this is equivalent to @JSImport(module, name).
When linking without module support, this is equivalent to @JSGlobal(globalFallback).

That means that if compiling for an environment without modules (such as a legacy browser environment) then it’s (correctly) interpreted as an alias for React.Suspense, but if compiled for an environment with modules then it gets interpreted as import * as Suspense from "react", which is obviously wrong.

I’ll send a PR as soon as I’ve verified that this fixes the issue.

[teozkr]

Thanks!