1

In another question I was advised to use ScalaJS bundler to import NPM dependencies.

I would like to use some Javascript NPM packages in a simple client-only web application. There is an example called static which shows this. My changes to the example:

Add into build.sbt:

npmDependencies in Compile += "esprima" -> "3.1.3"

Add into Main.scala:

import Esprima._
import JsonToString._
val code = "answer = 42"
val tokens = tokenize(code)
val tokensStr = tokens.json

Change in Main.scala: "This is bold" into s"This is bold $tokensStr"

Facade (a bit simplified, for full a version see GitHub):

import scala.scalajs.js
import scala.scalajs.js.annotation.JSName

@JSName("esprima")
@js.native
object Esprima extends js.Object {

  def tokenize(input: String, config: js.Any = js.native, delegate: String => String = js.native): js.Array[js.Any] = js.native

  def parse(input: String, config: js.Any = js.native): js.Dynamic = js.native
}

When running the html generated with fastOptJS::webpack the error is:

Uncaught TypeError: Cannot read property 'tokenize' of undefined

Inspecting the static-fastopt-bundle.js shows esprima is used, but its js is not bundled.

What other steps are needed to add dependencies into a client-only web page?

Community
  • 1
  • 1
Suma
  • 33,181
  • 16
  • 123
  • 191

1 Answers1

2

As described in this part of the documentation, you have to use @JSImport in your facade definition:

@JSImport("esprima", JSImport.Namespace)

For reference, @JSName defines a facade bound to a global name, while @JSImport defines a facade bound to a required JavaScript module.

Suma
  • 33,181
  • 16
  • 123
  • 191
Julien Richard-Foy
  • 9,634
  • 2
  • 36
  • 42
  • Great. A see a little drawback of needed a different facade depending on how I define the dependency, but at least it works. The package is the same. Is there some way to use the same facade for both webjars and bundler distributed package? – Suma Feb 04 '17 at 09:02
  • It seems e.q [jquery facade](https://github.com/scala-js/scala-js-jquery) does this. I will check it and perhaps add into this answer. – Suma Feb 04 '17 at 09:30
  • There is now a `JSImport` variant accepting a fallback when modules are not enabled, see https://github.com/scala-js/scala-js/pull/2957. Great. – Suma Oct 04 '18 at 09:31