Custom loader script for nodejs

[scalacenter]

Custom loader script for nodejs

[julienrf]

If I understand correctly you want to use nodejs to run a program generated by Scala.js, and this program makes use of some npm packages. So, you would like these dependencies to be bundled with the program. You might want to use the webpack “library” export mode (but for this to work you will have to use the trick explained in #59).

Another approach could be to not use webpack at all. Instead, just use the output of Scala.js as a nodejs module (and use the package.json file generated by scalajs-bundler to get its dependencies).

[sjrd]

The bootstrap used by Transcendent is basically a workaround for Scala.js not having @JSImport and direct CommonJS support in the past. Using this bootstrap method together with scalajs-bundler is an oxymoron, I think.

Eventually Transcendent should migrate to a model based on @JSImport and native CommonJS support from Scala.js. In the meantime, you could adapt the bridge with the Bootstrap not to use bootstrap. Instead of their documentation:

def start(bootstrap: Bootstrap) = {
  import bootstrap._

  val express = require[Express]("express")
  ...
}

you could do:

@js.native
@JSImport("express", JSImport.Namespace)
object ExpressBootstrap extends js.Object

def start() = {
  val express = ExpressBootstrap.asInstanceOf[Express]
  ...
}

[MHOOO]

I see. Manually loading express via JSImport in my main does work. However, what about libraries (e.g. transcendent or scalajs-react) that do not utilize JSImport internally. Won't they be unable to find the necessary dependencies? For example, scalajs-react uses the "React" singleton internally, that does not use JSImport. As such, the react module doesn't get pulled into the scalajs-react module namespace. Is there a work-around for that?

[sjrd]

For top-level singletons like React, nothing should change (I think), but you will probably have to leave the react.js library out of the Webpack treatment or something like that.

[julienrf]

@MHOOO I think @sjrd and I answered your questions, should I close this issue?

[MHOOO]

Yes, that did help, many thanks. But not quite there yet.

• I can successully use transcendent, via the work-around of srjd (i.e. a JSImport of react(-dom) on a dummy object), which will make sure that react/react-dom is included inside the resulting bundle. Furthermore however, since transcendent is internally using "React" as a top-level global identifier, I also needed to extend the webpack config with (this took me 2 days to figure out - explaining my late reply ^^):

module.exports.module.loaders = [
    // Make sure that react is available to e.g. the scalajs-react facade
    {test: require.resolve("react"), loader: "expose?React"},
    {test: require.resolve("react-dom"), loader: "expose?ReactDOM"}
]

and my sbt config with the "expose-loader" npm dependency. So far so good.

Now, I'm using a library called "rc-tabs" which contains a css file under
node_modules/rc-tabs/assets/index.css

I've tried requiring that file via

// @JSImport("~rc-tabs/assets/index.css", JSImport.Default)
@JSImport("!style-loader!css-loader!~rc-tabs/assets/index.css", JSImport.Default )
  @js.native
object RcTabsAssets extends js.Object {}

However, it doesn't appear that this is working:

[info] ERROR in ./frontend-fastopt.js
[info] Module not found: Error: Cannot resolve module '~rc-tabs/assets/index.css' in /home/thomas/data/gitspace/scalajs-webapp/app-frontend/target/scala-2.11
[info]  @ ./frontend-fastopt.js 1031:100-161

I'm not exactly sure whether this is still related to scalajs-bundler or webpack and am just posting here in hopes someone may know the answer.

[MHOOO]

Ok, found my mistake. The "~" was unnecessary, so the following:

@JSImport("!style-loader!css-loader!rc-tabs/assets/index.css", JSImport.Default )
  @js.native
object RcTabsAssets extends js.Object {}

does work (after depending on both style-loader & css-loader in npmDevDependencies).

My issue is thus resolved! (Though I question the need for an unused Singleton object for requiring a css file.... but oh well)

[julienrf]

Good to know that webpack css loaders can still be used with scalajs-bundler (that was unintended!).