Phoenix_live_view: LiveView / LiveComponent interactions not working in IE11

[bannmoore]

Environment

• Elixir version (elixir -v): Elixir 1.9.0
• Phoenix version (mix deps): 1.4.14
• Phoenix LiveView version (mix deps): 0.8.1 (also reproduced on 0.5.1)
• NodeJS version (node -v): v10.16.2
• NPM version (npm -v): 6.9.0
• Operating system: macOS Catalina Version 10.15.3 running VirtualBox 6.1
• Browsers you attempted to reproduce this bug on (the more the merrier): Internet Explorer 11 inside VirtualBox VM
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

When I have a LiveView parent containing a stateful LiveComponent that receives messages from the child using handle_info, the event doesn't fully work. The LiveView does not update and a console message appears. This only occurs in IE11, that I can tell. This occurs while using the polyfills recommended in the LiveView README.

Console Errors:

• 0.5.1: "Unable to get property 'childNodes' of undefined or null reference"
• 0.8.1: "Object doesn't support property or method 'remove'"

Here is a sample app that reproduces the behavior. There are two relevant branches:

• master is running live_view 0.5.1 (where we first observed the bug)
• live_view_0_8_1 is running the latest release of live_view (which has the same behavior and different console error)

Note: The LiveComponent in the example repo has a phx-hook on it, which doesn't seem to affect this issue one way or the other.

0.5.1 Screenshot:

0.8.1 Screenshot:

Expected behavior

I'd expect the component interaction to work the same as it does in Firefox and Chrome.

Firefox Screenshot:

Please let me know if there's any additional information I can provide. ❤️

[josevalim]

Hi @bannmoore! Supporting IE11 is a matter of chasing polyfills and it seems this one is missing:

import "mdn-polyfills/Node.prototype.remove"

If you add it to your app.js then it should work (or another missing polyfill will be found). :D

[josevalim]

Also note that you are missing the import "@webcomponents/template" polyfill. You can find our update list in the README. :)

[bannmoore]

@josevalim Many thanks for the information! I added the newest list of polyfills to my sample app, and that fixed the problem in _both_ versions of live_view. 🎉 🎉 🎉 I'll close this issue.