Runtime errors with rtfeldman/elm-css and Dark Reader

I’m following up on this thread since I’ve found a way to create run time errors without using Browser.application as has been mentioned before.
When testing one of my projects recently I noticed the Dark Reader extension caused some runtime errors even when using Browser.element rather than Browser.application. The issue seems to be that Dark reader to appends a style tag everywhere elm-css generates one. When removing elm-css there are no longer errors. Here’s the simplest example I could come up with.

module Main exposing (main)

import Browser
import Css exposing (..)
import Html.Styled as Styled exposing (div, text)
import Html.Styled.Attributes exposing (css)
import Html.Styled.Events exposing (onClick)

init : () -> ( Int, Cmd () )
init =
    always ( 0, Cmd.none )

main =
        { init = init
        , update = \_ model -> ( model + 1, Cmd.none )
        , view = (\model -> div [ onClick (), css [ color <| rgb 0 0 0 ] ] [ text <| String.fromInt model ]) >> Styled.toUnstyled
        , subscriptions = always Sub.none

I’ve seen the childNode error on some code I can’t show here. Here’s the error that the code above reproduces:
Uncaught TypeError: domNode.replaceData is not a function
at _VirtualDom_applyPatch ((index):3691)
at _VirtualDom_applyPatchesHelp ((index):3670)
at _VirtualDom_applyPatches ((index):3661)
at (index):3916
at updateIfNeeded ((index):3985)

1 Like

I don’t really have any deep knowledge here, but the one thought I do have is that maybe you could try modifying elm-css to use Html.Keyed.node for the element that contains the <style> tag that elm-css generates and see if that helps avoid the problem. (Html.Keyed is my go-to thing to try when Elm seems to be getting confused about the state of the DOM.)


Thanks for the tip. That actually made the difference.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.