Integrating Server-Side Rendering with scalajs-react

Question

I've been trying to follow the guide of integrating server-side rendering in scalajs-react but my stack must be a little different so it's not so super straight-forward.

I'm using SBT 1.5.5, scala 2.12.10 with the following relevant plugins:

  addSbtPlugin("com.typesafe.play"  % "sbt-plugin"                    % "2.7.4")
  addSbtPlugin("org.scala-js"       % "sbt-scalajs"                   % "1.7.0")
  addSbtPlugin("org.scala-js"       % "sbt-jsdependencies"            % "1.0.2")
  addSbtPlugin("ch.epfl.scala"      % "sbt-scalajs-bundler"           % "0.20.0")
  addSbtPlugin("com.eed3si9n" % "sbt-buildinfo" % "0.10.0")
  addSbtPlugin("org.scala-native"   % "sbt-scala-native"              % "0.3.7")
  addSbtPlugin("org.portable-scala" % "sbt-scalajs-crossproject"      % "1.2.0")
  addSbtPlugin("org.portable-scala" % "sbt-scala-native-crossproject" % "1.2.0")

In Step 2 of the article it says to implement the following into the 'build.sbt' file:

  val scalaGraalVer = "1.0.1"

  lazy val webappSsr = crossProject("webapp-ssr")

  lazy val webappSsrJs = webappSsr.js
    .dependsOn(myScalaJsWebapp) // change this to your real SJS module name(s)
    .settings(
      libraryDependencies ++= Seq(
        "com.github.japgolly.scala-graal" %%% "core-js"       % scalaGraalVer,
        "com.github.japgolly.scala-graal" %%% "ext-boopickle" % scalaGraalVer
      ),
      scalaJSLinkerConfig ~= { _.withSourceMap(false) },
      artifactPath in (Compile, fastOptJS) := (crossTarget.value / "webapp-ssr.js"),
      artifactPath in (Compile, fullOptJS) := (crossTarget.value / "webapp-ssr.js")
    )

  lazy val webappSsrJvm = webappSsr.jvm
    .settings(
      libraryDependencies ++= Seq(
        "com.github.japgolly.scala-graal" %% "core"          % scalaGraalVer,
        "com.github.japgolly.scala-graal" %% "core-js"       % scalaGraalVer,
        "com.github.japgolly.scala-graal" %% "ext-boopickle" % scalaGraalVer
      ),
      unmanagedResources in Compile += Def.taskDyn {
        val stage = (scalaJSStage in Compile in webappSsrJs).value
        val task = stageKey(stage)
        Def.task((task in Compile in webappSsrJs).value.data)
      }.value)
    )

So I currently have 2 issues here:

1. crossProject does not appear to take a String as a parameter, i.e,

   def crossProject(platforms : sbtcrossproject.Platform*)

2. Where it says val task = stageKey(stage) - stageKey is not a recognised function. I've searched online but can't fathom where it is located and therefore what I'm lacking or if there is a way around.

Answer 1

As @tdimoff already said the crossProject method of the sbtcrossproject library does not accept a string parameter, so the line lazy val webappSsr = crossProject("webapp-ssr") should be replaced with lazy val webappSsr = crossProject(JSPlatform, JVMPlatform).

Regarding the stageKey function, it looks like it is part of the scalajs-bundler library, so you will need to add the following library dependency:

libraryDependencies += "ch.epfl.scala" % "scalajs-bundler" % "0.20.0"

This should make the stageKey function available.