gdotdesign/elm-ui

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

chancyk opened this issue · 3 comments

chancyk commented

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

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

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>.