Uncaught TypeError: Cannot assign to read only property 'className' of object [DOM mutations from FontAwesome]

[Clindbergh]

I have encountered the following exception in multiple projects:

stubbornlove.js:2842 Uncaught TypeError: Cannot assign to read only property 'className' of object '#'
at _VirtualDom_applyFacts (stubbornlove.js:2842)
at _VirtualDom_applyPatch (stubbornlove.js:3719)
at _VirtualDom_applyPatchesHelp (stubbornlove.js:3702)
at _VirtualDom_applyPatches (stubbornlove.js:3693)
at stubbornlove.js:3982
at updateIfNeeded (stubbornlove.js:4017)

I haven't been able to isolate the issue a can't post the entire source. The error appeared after a Msg from an ajax response triggered a view change. As a result the html doesn't properly update anymore and the exception is caused after every update.

Any hints why this problem might appear and possible workarounds? Once I'll be successful to isolate the issue.

[Clindbergh]

Apparently this issue is because the javascript library Font Awesome did some dom mutations when including the icons. The workaround is to use elm-fontawesome.

How can we prevent Elm from crashing when external js code alters the DOM?

Notes:

• I assume that Elm update fails when using 1Password X Chrome extension #147 is due to the same reason (Elm update fails when using 1Password X Chrome extension).
• This very recent stackoverflow question asks the same question.
• There is a much discussed issue on how react deals with the problem.
• See how the elm japan 2020 conference page crashes when viewing it with google translate.