The Problem

This was originally filed in the bug tracker for elm-3d-scene but this patch is the root cause ianmackenzie/elm-3d-scene#105

Expected behavior:

Clicking the one button in this example should update the model and otherwise do nothing. The console should not have any errors.

Actual behavior

The console shows many copies of this error (1 per frame in a 60fps browser maybe?)

main.html:2843 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at _VirtualDom_render (main.html:2843:43)
    at _VirtualDom_applyPatchRedraw (main.html:3878:16)
    at _VirtualDom_addDomNodesHelp (main.html:3728:5)
    at _VirtualDom_addDomNodesHelp (main.html:3643:5)
    at _VirtualDom_addDomNodesHelp (main.html:3739:8)
    at _VirtualDom_addDomNodes (main.html:3617:2)
    at _VirtualDom_applyPatches (main.html:3762:2)
    at main.html:4038:15
    at updateIfNeeded (main.html:4107:56)

The line in the stack trace points to kids.length in the last for loop in the code below. Lines included above just so it's easier to find in the generated JS. The error will be the same if I build with a JS file as output, only the line numbers will be different naturally.

	// at this point `tag` must be 1 or 2

	var domNode = vNode.f
		? _VirtualDom_doc.createElementNS(vNode.f, vNode.c)
		: _VirtualDom_doc.createElement(vNode.c);
	domNode.created_by_elm = true;

	if (_VirtualDom_divertHrefToApp && vNode.c == 'a')
	{
		domNode.addEventListener('click', _VirtualDom_divertHrefToApp(domNode));
	}

	_VirtualDom_applyFacts(domNode, eventNode, vNode.d);

	for (var kids = vNode.e, i = 0; i < kids.length; i++) 
	{
		_VirtualDom_appendChild(domNode, _VirtualDom_render(tag === 1 ? kids[i] : kids[i].b, eventNode));
	}

	return domNode;

Reproducing the error

Platform

• MacOS 14.0 (23A344) and I had it previously on 13.X (not sure what it was before I upgraded) on an M1 Max
• Elm 0.19.1 installed through nix-env /nix/store/14fi2kblxbqkpxgm3w6mf8c16xm8ddb9-elm-0.19.1/bin/elm or installed via the official elm installer
• same problem in Safari and Arc, neither have any extensions other than the ad blocker uBlock Origin that comes with Arc.
• ~/.elm/0.19.1/packages/elm/virtual-dom/ patched with this patch

Build command

elm make src/Main.elm --output=main.html but this persists whether or not I have --debug or --optimize or --output=main.js then include into main.js into a handwritten index.html. It persists whether I open the HTML file in the browser (i.e. with file:///path/to/index.html) or if I serve it using a minimal webserver (I tend to use python3 -m http.server 4321). I have even reproduced it in a lamdera page.

elm.json

{
    "type": "application",
    "source-directories": [
        "src"
    ],
    "elm-version": "0.19.1",
    "dependencies": {
        "direct": {
            "avh4/elm-color": "1.0.0",
            "elm/browser": "1.0.2",
            "elm/core": "1.0.5",
            "elm/html": "1.0.0",
            "ianmackenzie/elm-3d-camera": "3.1.0",
            "ianmackenzie/elm-3d-scene": "1.0.1",
            "ianmackenzie/elm-geometry": "3.11.0",
            "ianmackenzie/elm-units": "2.10.0"
        },
        "indirect": {
            "elm/json": "1.1.3",
            "elm/random": "1.0.0",
            "elm/time": "1.0.0",
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.3",
            "elm-explorations/linear-algebra": "1.0.3",
            "elm-explorations/webgl": "1.1.3",
            "ianmackenzie/elm-1d-parameter": "1.0.1",
            "ianmackenzie/elm-float-extra": "1.1.0",
            "ianmackenzie/elm-geometry-linear-algebra-interop": "2.0.2",
            "ianmackenzie/elm-interval": "3.1.0",
            "ianmackenzie/elm-triangular-mesh": "1.1.0",
            "ianmackenzie/elm-units-interval": "3.2.0"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}

src/Main.elm

module Main exposing (main)

import Angle
import Browser
import Camera3d
import Color
import Direction3d
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Length
import Pixels
import Point3d
import Scene3d
import Scene3d.Material as Material
import Viewpoint3d


type Model
    = Model


type Msg
    = MakeErrorsHappen


update : Msg -> Model -> ( Model, Cmd msg )
update MakeErrorsHappen _ =
    ( Model, Cmd.none )


main =
    Browser.element
        { init = \() -> ( Model, Cmd.none )
        , subscriptions = \Model -> Sub.none
        , update = update
        , view = view
        }


view : Model -> Html Msg
view model =
    Html.div
        []
        [ scene model
        , button [ onClick MakeErrorsHappen ]
            [ text "make bugs"
            ]
        ]


scene : Model -> Html msg
scene _ =
    let
        underlayment : Scene3d.Entity coordinates
        underlayment =
            Scene3d.quad (Material.color (Color.rgba 255 0 0 0.5))
                (Point3d.meters -5 -5 -1)
                (Point3d.meters 5 -5 -1)
                (Point3d.meters 5 5 -1)
                (Point3d.meters -5 5 -1)

        r =
            42.0

        ( camX, camY, camZ ) =
            ( r * cos 0.0, r * sin 0.0, 24.0 )

        camera =
            Camera3d.perspective
                { viewpoint =
                    Viewpoint3d.lookAt
                        { focalPoint = Point3d.origin
                        , eyePoint = Point3d.meters camX camY camZ
                        , upDirection = Direction3d.positiveZ
                        }
                , verticalFieldOfView = Angle.degrees 30
                }
    in
    Scene3d.cloudy
        { entities = [ underlayment ]
        , camera = camera
        , clipDepth = Length.meters 1
        , background = Scene3d.transparentBackground
        , dimensions = ( Pixels.int 800, Pixels.int 1000 )
        , upDirection = Direction3d.negativeZ
        }

Things that get rid of the Problem

Make scene not depend on the model

In the minimum example above, changing scene : Model -> Html msg to scene : Html msg gets rid of the problem. It means, of course, that the scene cannot change with the values in the model.

This one https://chrome.google.com/webstore/detail/stayfocusd/laankejkbhbdhmipfmgcngdelahlfoji?hl=en breaks Browser.application even with the sed hack. It adds elements to the beginning of the inner and outer body elements.

There is a new kid on the block.

legacyDisableGrammarly : Attribute msg
legacyDisableGrammarly =
    Attrs.attribute "data-gramm_editor" "false"

currentDisableGrammarly : Attribute msg
currentDisableGrammarly =
    Attrs.attribute "data-enable-grammarly" "false"

I tend to have them both on :)

Some context for the new attribute: facebookarchive/draft-js#616 (comment)

Thank you for the solution, I found out that elm-apps also crash when screen-readers change the focus or highlight certain elements and this patch was a solution to my problem.

elm/browser#121

Probably, it would be a good Idea to make it a larger project that collects such patches, so that other users could select on a more fine-grained level, which patches should be applied. I created two patches that fix the URL problem, since the file protocol is not allowed in elm, as well as adding external-click events or to use innerHTML ...

https://github.com/andre-dietrich/elm-patch