Search code examples
scala.jsscalajs-bundler

scalaks-bootstrap: Uncaught ReferenceError: exports is not defined at scalajsenv.js:29

I try to make a simple scalajs + scalajs-bootstrap application, but there is few documentation on how to set up the skeleton. The scalajs-bootstrap project has an example, but the build.sbt file is very big and it contains both the source code of the scalajs-bootstrap and the example itself.

I tried creating a new project with only the bootstrap4 example, but when I open the index.html page on the browswer, it complains with

Uncaught ReferenceError: exports is not defined at scalajsenv.js:29

This is my current set-up:

project/plugins.sbt

addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.20")
addSbtPlugin("com.github.karasiq" % "sbt-scalajs-bundler" % "1.2.1")
addSbtPlugin("ch.epfl.scala" % "sbt-scalajs-bundler" % "0.13.0")

build.sbt

enablePlugins(ScalaJSBundlerPlugin)

scalaVersion := "2.12.6"
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "0.9.7"
libraryDependencies += "com.github.karasiq" %%% "scalajs-bootstrap-v4" % "2.3.5"

npmDependencies in Compile += "jquery" -> "3.2.1"
npmDependencies in Compile += "bootstrap" -> "4.1.1"

mainClass in Compile := Some("com.karasiq.bootstrap4.test.frontend.BootstrapTestApp")
scalaJSUseMainModuleInitializer := true

scalaJSModuleKind := ModuleKind.CommonJSModule
version in webpack := "4.28.4"
emitSourceMaps := false

This is the source code of scalajs-bootstrap4 libray and example: https://github.com/Karasiq/scalajs-bootstrap

This is my complete minimal example, which fails with the exports is not defined error: https://github.com/dportabella/scalajs-bootstrap4-examples

How to modify plugins.sbt and/or build.sbt to make this project work?

Solution

project/plugins.sbt

addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.28")
addSbtPlugin("ch.epfl.scala" % "sbt-scalajs-bundler" % "0.13.0")

build.sbt

enablePlugins(ScalaJSBundlerPlugin)

scalaVersion := "2.12.8"
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "0.9.7"
libraryDependencies += "com.github.karasiq" %%% "scalajs-bootstrap-v4" % "2.3.5"

npmDependencies in Compile += "jquery" -> "3.2.1"
npmDependencies in Compile += "bootstrap" -> "4.1.1"

mainClass in Compile := Some("com.karasiq.bootstrap4.test.frontend.BootstrapTestApp")
scalaJSUseMainModuleInitializer := true

scalaJSModuleKind := ModuleKind.CommonJSModule
version in webpack := "4.28.4"
emitSourceMaps := false

full example: https://github.com/dportabella/scalajs-bootstrap4-examples

Solution

  • In my experience, you need to:

    • Add the following lines to your project/plugins.sbt:
    addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.25")
addSbtPlugin("ch.epfl.scala" % "sbt-scalajs-bundler" % "0.13.1")
    • Enable both ScalaJSPlugin and ScalaJSBundlerPlugin in your build.sbt
    • Add the following configuration to your build.sbt:
    scalaJSUseMainModuleInitializer := true
scalaJSModuleKind := ModuleKind.CommonJSModule
version in webpack := "4.28.4"
emitSourceMaps := false

    Finally, run fastOptJS::webpack to create the packed JS file.

    Note that the packed JS file needs to be referenced in the index.html - not the compiled JS file!

    I hope this helps.