browserifybabeljsplayframework-2.5

No mapping using babel and browserify in PlayFramework 2.5

I am writing a project that is based on the seed at git@github.com:maximebourreau/play-reactjs-es6-seed.git

It appears to work with the 2.3 play framework, but I am getting errors using the 2.5 framework.

When I try to load a page, it get the following error:

RuntimeException: No mapping for /path/to/root/target/web/browserify/main.js

The full stack trace is at the bottom of the message.

This is the file that browserify is writing, but it seems that play does not know how to map it to a URL. I was not able to find anything that says where the file should be written or how to add a new mapping. I am also happy to use a plugin to do the translation.

Where should I be writing the file, or how should I tell play how to map the file?

My build.sbt is

name := """myProject"""

version := "1.0-SNAPSHOT"

lazy val root = (project in file(".")).enablePlugins(PlayJava)


scalaVersion := "2.11.7"

libraryDependencies ++= Seq(
  javaJdbc,
  cache,
  javaWs,
)

val browserifyTask = taskKey[Seq[File]]("Run browserify")

val browserifyOutputDir = settingKey[File]("Browserify output directory")

browserifyOutputDir := target.value / "web" / "browserify"

browserifyTask := {
  println("Running browserify");
  val outputFile = browserifyOutputDir.value / "main.js"
  browserifyOutputDir.value.mkdirs
  "./node_modules/.bin/browserify -t [ babelify --presets [ es2015 react ] ] app/assets/javascripts/main.jsx -o "+outputFile.getPath !;
  List(outputFile)
}

sourceGenerators in Assets <+= browserifyTask

resourceDirectories in Assets += browserifyOutputDir.value

My routes file is

# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~

# An example controller showing a sample home page
GET     /                           controllers.HomeController.index
# An example controller showing how to use dependency injection
GET     /count                      controllers.CountController.count

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)


POST    /assessment                 controllers.AsyncController.assessment

#
# Play can't find files in node_modules in 2.5+
#GET     /node_modules/*file         controllers.NodeModulesController.at(file)
#GET     /node_modules/*file         controllers.NodeModulesController.at(file: String)
GET     /node_modules/*file         controllers.NodeModulesController.versioned(file: String)
#GET     /node_modules/*file         controllers.Assets.versioned(path="/node_modules", file:Asset)

The stack trace is 

 scala.sys.package$.error(package.scala:27)
 sbt.Mapper$$anonfun$fail$1.apply(PathMapper.scala:37)
 sbt.Mapper$$anonfun$fail$1.apply(PathMapper.scala:37)
 sbt.Alternatives$$anon$1$$anonfun$$bar$1$$anonfun$apply$3.apply(PathMapper.scala:117)
 sbt.Alternatives$$anon$1$$anonfun$$bar$1$$anonfun$apply$3.apply(PathMapper.scala:117)
 scala.Option.orElse(Option.scala:257)
 sbt.Alternatives$$anon$1$$anonfun$$bar$1.apply(PathMapper.scala:117)
 sbt.Alternatives$$anon$1$$anonfun$$bar$1.apply(PathMapper.scala:117)
 sbt.PathFinder$$anonfun$pair$1.apply(Path.scala:135)
 sbt.PathFinder$$anonfun$pair$1.apply(Path.scala:135)
 scala.collection.TraversableLike$$anonfun$flatMap$1.apply(TraversableLike.scala:251)
 scala.collection.TraversableLike$$anonfun$flatMap$1.apply(TraversableLike.scala:251)
 scala.collection.mutable.ResizableArray$class.foreach(ResizableArray.scala:59)
 scala.collection.mutable.ArrayBuffer.foreach(ArrayBuffer.scala:47)
 scala.collection.TraversableLike$class.flatMap(TraversableLike.scala:251)
 scala.collection.AbstractTraversable.flatMap(Traversable.scala:105)
 sbt.PathFinder.pair(Path.scala:135)
 com.typesafe.sbt.jse.SbtJsTask$$anonfun$jsSourceFileTask$1$$anonfun$9$$anonfun$10$$anonfun$apply$4.apply(SbtJsTask.scala:292)
 com.typesafe.sbt.jse.SbtJsTask$$anonfun$jsSourceFileTask$1$$anonfun$9$$anonfun$10$$anonfun$apply$4.apply(SbtJsTask.scala:286)
 com.typesafe.sbt.web.SbtWeb$.withActorRefFactory(SbtWeb.scala:595)
 com.typesafe.sbt.jse.SbtJsTask$$anonfun$jsSourceFileTask$1$$anonfun$9$$anonfun$10.apply(SbtJsTask.scala:285)
 com.typesafe.sbt.jse.SbtJsTask$$anonfun$jsSourceFileTask$1$$anonfun$9$$anonfun$10.apply(SbtJsTask.scala:284)
 scala.collection.immutable.Stream$$anonfun$map$1.apply(Stream.scala:376)
 scala.collection.immutable.Stream$$anonfun$map$1.apply(Stream.scala:376)
 scala.collection.immutable.Stream$Cons.tail(Stream.scala:1085)
 scala.collection.immutable.Stream$Cons.tail(Stream.scala:1077)
 scala.collection.immutable.Stream.foldLeft(Stream.scala:563)
 scala.concurrent.Future$.sequence(Future.scala:491)
 com.typesafe.sbt.jse.SbtJsTask$$anonfun$jsSourceFileTask$1$$anonfun$9.apply(SbtJsTask.scala:303)
 com.typesafe.sbt.jse.SbtJsTask$$anonfun$jsSourceFileTask$1$$anonfun$9.apply(SbtJsTask.scala:272)
 com.typesafe.sbt.web.incremental.package$.syncIncremental(package.scala:228)
 com.typesafe.sbt.jse.SbtJsTask$$anonfun$jsSourceFileTask$1.apply(SbtJsTask.scala:271)
 com.typesafe.sbt.jse.SbtJsTask$$anonfun$jsSourceFileTask$1.apply(SbtJsTask.scala:257)
 scala.Function1$$anonfun$compose$1.apply(Function1.scala:47)
 sbt.$tilde$greater$$anonfun$$u2219$1.apply(TypeFunctions.scala:40)
 sbt.std.Transform$$anon$4.work(System.scala:63)
 sbt.Execute$$anonfun$submit$1$$anonfun$apply$1.apply(Execute.scala:228)
 sbt.Execute$$anonfun$submit$1$$anonfun$apply$1.apply(Execute.scala:228)
 sbt.ErrorHandling$.wideConvert(ErrorHandling.scala:17)
 sbt.Execute.work(Execute.scala:237)
 sbt.Execute$$anonfun$submit$1.apply(Execute.scala:228)
 sbt.Execute$$anonfun$submit$1.apply(Execute.scala:228)
 sbt.ConcurrentRestrictions$$anon$4$$anonfun$1.apply(ConcurrentRestrictions.scala:159)
 sbt.CompletionService$$anon$2.call(CompletionService.scala:28)
 java.util.concurrent.FutureTask.run(FutureTask.java:266)
 java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
 java.util.concurrent.FutureTask.run(FutureTask.java:266)
 java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
 java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
 java.lang.Thread.run(Thread.java:745)
Solution

  • You must change two lines in build.sbt

    List(outputFile)  to Nil
and
resourceDirectories in Asset += browserifyOutputDir.value
to
unmanagedResources in Assets += baseDirectory.value / "target/web/browserify/main.js"

    For example:

    browserifyTask := {
  println("Running browserify");
  val outputFile = browserifyOutputDir.value / "main.js"
  browserifyOutputDir.value.mkdirs
  "./node_modules/.bin/browserify -t [ babelify --presets [ es2015 react ] ] app/assets/javascripts/main.jsx -o "+outputFile.getPath !;
  Nil
}

sourceGenerators in Assets <+= browserifyTask
unmanagedResources in Assets += baseDirectory.value / "target/web/browserify/main.js"