gdotdesign / elm-ui

UI library for making web applications with Elm
https://elm-ui.netlify.com
BSD 2-Clause "Simplified" License
920 stars 39 forks source link

Runtime error from native code: Failed to execute 'observe' on 'MutationObserver' #67

Closed chancyk closed 7 years ago

chancyk commented 7 years ago

Windows 7 64-bit Chrome 56.0.2924.87

It seems document.body is null when observe() is called on the MutationObserver.

The console error:

image

The failing line:

image

Code that raises the exception (minimal slider component):

module Slider exposing (..)

import Html exposing (h1, p, text, div, node)
import Html.Attributes

import Ui.Slider

type alias Model =
  { slider : Ui.Slider.Model
  }

initialModel : Model
initialModel =
  { slider = 
      Ui.Slider.init ()
      |> Ui.Slider.setValue 0.8
  }

type Msg
  = SliderChanged Float
  | SliderMsg Ui.Slider.Msg

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case msg of   
    SliderMsg sliderMsg ->
      let
        ( slider_, cmd_ ) = Ui.Slider.update sliderMsg model.slider
      in
        ( { model | slider = slider_ }
        , Cmd.map SliderMsg cmd_
        )

    SliderChanged _ ->
      ( model, Cmd.none )

subscriptions model =
  Sub.batch
    [ Ui.Slider.onChange SliderChanged model.slider
    ]

main : Program Never Model Msg
main =
    Html.program
      { init = ( initialModel, Cmd.none ),
        update = update,
        view = view,
        subscriptions = subscriptions
      }

view model =
  Html.div
    [ ]
    [ Html.map SliderMsg (Ui.Slider.view model.slider) ]
gdotdesign commented 7 years ago

Thanks for reporting.

Where do you include the script to the page? I would guess it's in the head and at the time there is no document.body, if it's the case put your script in the body as a workaround.

I'll probably fix this soon.

chancyk commented 7 years ago

I was actually just letting elm-make generate the entire index.html, but you're right, if I create an index.html and include elm.js as a script instead, it throws the error when inside of <head> but works when it's either inside of or after <body>.

gdotdesign commented 7 years ago

Released in https://github.com/gdotdesign/elm-ui/releases/tag/1.1.0