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

16th
Jul 2017
José Luis Colomer Martorell
@beikern
Jul 16 2017 19:05
@rleibman I'm trying to use your https://github.com/rleibman/scalajs-react-components branch. I've loaded the material-ui dependencies via scalajs-bundler. But when I try to render a navBar using the code in the demo I get this error in the browser:
AppBar.js:186 Uncaught TypeError: Cannot read property 'prepareStyles' of undefined
    at AppBar.render (AppBar.js:186)
    at ReactCompositeComponent.js:795
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:794)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:821)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:361)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:236)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)

Seems like I need to expose material-ui to the global scope right? I've tried to do that following the scalajs-bundler cookbook recipe:

https://scalacenter.github.io/scalajs-bundler/cookbook.html#global-namespace

But no luck :(

José Luis Colomer Martorell
@beikern
Jul 16 2017 19:12

And another question: In the core code in this file: chandu0101.scalajs.react.components.materialui.Mui

Theres a lot of imports following the pattern

@js.native @JSImport("material-ui/styles/MuiThemeProvider", JSImport.Default) object MuiThemeProvider

Scalajs-bundler docs says: How to use npm modules from Scala code? https://scalacenter.github.io/scalajs-bundler/cookbook.html#facade

import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport

@JSImport("foo", JSImport.Namespace)
@js.native
object foo extends js.Object {
  def bar(i: Int): Int = js.native
}

Why the material ui object is using @js.native @JSImport("material-ui/styles/MuiThemeProvider", JSImport.Default) instead of @js.native @JSImport("material-ui/styles/MuiThemeProvider", JSImport.Namespace) ?

José Luis Colomer Martorell
@beikern
Jul 16 2017 19:35
Fixed. The mui components must have a provided miuTheme using MuiMuiThemeProvider()()
:)