These are chat archives for chandu0101/scalajs-react-components

20th
Sep 2017
Abdhesh Kumar
@abdheshkumar
Sep 20 2017 15:41
i am trying to use the library with Scalajs bundler
but I am unable to see the dependencies beeing resolved properly
package com.example


import chandu0101.scalajs.react.components.materialui.MuiAppBar
import org.scalajs.jquery.JQueryStatic

import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._
import chandu0101.scalajs.react.components.Implicits._
import org.scalajs.dom
@js.native
@JSImport("jquery", JSImport.Namespace)
object jQuery extends JQueryStatic

object Main extends js.JSApp {
  def base(name: String, params: String*): Callback =
    Callback.info(s"Event handler: $name(${params.mkString(", ")})")

  def f1(name: String): js.UndefOr[Callback] = base(name)

  override def main(): Unit = {
    val component = ScalaComponent.builder[Unit]("MuiAppBarDemo")
      .render(P =>
        <.div(
          MuiAppBar(
            title = "Title",
            showMenuIconButton = true
          )()
        )
      ).build

    component().renderIntoDOM(dom.document.getElementById("playground"))
  }
}
On browser console, I am getting below error
MuiAppBar.scala:71 Uncaught TypeError: Cannot read property 'AppBar' of undefined
    at $c_Lchandu0101_scalajs_react_components_materialui_MuiAppBar.apply__sc_Seq__Ljapgolly_scalajs_react_component_Js$UnmountedWithRoot (MuiAppBar.scala:71)
    at Main.scala:30
    at $c_sjsr_AnonFunction1.apply__O__O (AnonFunctions.scala:15)
    at ViaReactComponent.scala:256
    at $c_sjsr_AnonFunction1.apply__O__O (AnonFunctions.scala:15)
    at Object.<anonymous> (ViaReactComponent.scala:252)
    at ReactCompositeComponent.js:795
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:794)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:821)
Andreas Gies
@atooni
Sep 20 2017 19:22
Hi there, I am not an expert - but I have tried to configure our own app with scalajs bundler a couple of weeks ago. After having some issues that seemed to indicate that sclajs-bundler was relying on an older version of webpack (please correct me if I am wrong) I have refrained to plain sbt & npm with webpack as two separate entities.
At the end I got a configuration up and running which would allow me to initialize my npm modules using the normal npm install. Then I would start sbt with ~fastOptJS and in another terminal I would start the webpack dev server with "npm start".
This will pick up any changes in the Scala JS modules on the fly and refresh the website.
Personally I found removing the additional layer of scalajs bundler gave me a better understanding of what is actually happening.
The latter points to an open pull request on scalajs react components