2

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.

thlim
  • 2,676
  • 3
  • 30
  • 50
  • I think this question should help you: https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack – Julien Richard-Foy May 28 '18 at 13:00
  • Thanks. I reread the link you suggested and made some changes. The modal dialog showed if I include the jQuery plugin script in the HTML page i.e. ``. I tried but failed to load the `jquery.modal.min.js` using ScalaJS code level. Any suggestion? – thlim Jun 01 '18 at 10:40

0 Answers0