I am using this jQuery modal dialog plugin with jQuery facade. It was working until I decided to change from jsDependencies
to Webpack using scala-bundler. The Webpack generated bundle custom Javascript didn't include the modal dialog script. It could be that this modal dialog library is not Webpack compatible but I can't tell because I am not familiar with Webpack. How do I make my project to generate the final bundle to include the modal dialog? Please advise. Thanks
Looking at the modal dialog script, I think I just have to execute the modal dialog script upon load and it will attach itself to $
. The jQuery facade that I have created should remain unchanged. Unfortunately, I don't know how to that with Scala.js.
I have included part of my build.sbt
lazy val server = (project in file("server")).settings(commonSettings).settings(
scalaJSProjects := Seq(client),
pipelineStages in Assets := Seq(scalaJSPipeline),
compile in Compile := ((compile in Compile) dependsOn scalaJSPipeline).value,
libraryDependencies ++= Seq(
"com.typesafe.akka" %% "akka-http" % "10.1.1",
"com.typesafe.akka" %% "akka-stream" % "2.5.11",
"com.vmunier" %% "scalajs-scripts" % "1.1.2"
),
WebKeys.packagePrefix in Assets := "public/",
managedClasspath in Runtime += (packageBin in Assets).value)
.enablePlugins(SbtWeb, JavaAppPackaging, WebScalaJSBundlerPlugin)
.dependsOn(sharedJvm)
lazy val client = (project in file("client")).settings(commonSettings).settings(
libraryDependencies ++= Seq(
"org.scala-js" %%% "scalajs-dom" % "0.9.5",
"org.querki" %%% "jquery-facade" % "1.2",
"org.querki" %%% "querki-jsext" % "0.8",
"com.lihaoyi" %%% "upickle" % "0.6.5",
"com.lihaoyi" %%% "utest" % "0.6.3" % "test"),
scalaJSUseMainModuleInitializer := true,
skip in packageJSDependencies := false,
npmDevDependencies in Compile ++= Seq(
"webpack-merge" -> "4.1.2",
"imports-loader" -> "0.8.0",
"expose-loader" -> "0.7.5"),
npmDependencies in Compile ++= Seq(
"jquery" -> "2.2.1",
"jquery-modal" -> "0.9.1"))
.enablePlugins(ScalaJSBundlerPlugin, ScalaJSWeb)
.dependsOn(sharedJs)
Update 1
The jQuery plugin manage to see $
after I exposed jQuery
using a custom webpack.config.js
as shown below. However, I have to include the plugin in the HTML page using <script ...>
. How do I include and execute the plugin in ScalaJS instead and avoid the <script>
tag in the HTML page?
const webpack = require('webpack')
module.exports = {
module: {
rules: [
// any other rules
{
// Exposes jQuery for use outside Webpack build
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
]
},
plugins: [
// Provides jQuery for other JS bundled with Webpack
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
}
Update 2
After months of idling, I picked it up again a few days ago. I got it worked with Webpack via scalajs-bundler, finally.
Click here for the solution.