Uncaught TypeError: Cannot read property 'nextSibling' of null

[abiyasa]

Marko Version: 4.9.x & 4.10.x

Details

We have dialog component which is a stateful component. When the dialog is shown and then close, and then shown again, we got an error on browser console which causing any component's browser-side-behaviour stop working at all:

Uncaught TypeError: Cannot read property 'nextSibling' of null
    at Component.___forEachNode (Component.js:542)
    at Component.___detach (Component.js:533)
    at morphChildren (index.js:329)
    at morphEl (index.js:790)
    at morphChildren (index.js:384)
    at morphEl (index.js:790)
    at morphChildren (index.js:384)
    at morphEl (index.js:790)
    at morphChildren (index.js:384)
    at morphEl (index.js:790)

To isolate this bug, I made a repo so you can easily reproduce this bug: https://github.com/abiyasa/marko-dom-node-bugs

Steps to reproduce:

1. Clone https://github.com/abiyasa/marko-dom-node-bugs and do yarn install
2. yarn start to start server
3. open http://localhost:8080/bug-dialog-close
4. Click the big blue button to show the dialog.
5. Close the dialog by clicking 'Yes' or 'No' button.
6. Show the dialog again by clicking the big blue button.
7. Checkout the browser console

Expected Behavior

The dialog should be displayed the 2nd time without any error.

Actual Behavior

Errors appear on browser's console when trying to display the dialog for the 2nd time. This error breaks the page since any component stop working afterwards (until you refresh the page).

Possible Fix

The cause is unknown but if we close the dialog by clicking 'X' button on dialog's top corner (or clicking outside the dialog area), the error does NOT appear!

Additional Info

Your Environment

• Environment name and version (e.g. Chrome 39, node.js 5.4): Node.js 8.11.x, Latest Chome & Firefox
• Operating System and version (desktop or mobile): OSX
• Link to your project: https://github.com/abiyasa/marko-dom-node-bugs

Steps to Reproduce

1. Clone https://github.com/abiyasa/marko-dom-node-bugs and do yarn install
2. yarn start to start server
3. open http://localhost:8080/bug-dialog-close
4. Click the big blue button to show the dialog.
5. Close the dialog by clicking 'Yes' or 'No' button.
6. Show the dialog again by clicking the big blue button.
7. Checkout the browser console

Stack Trace

Uncaught TypeError: Cannot read property 'nextSibling' of null
    at Component.___forEachNode (Component.js:542)
    at Component.___detach (Component.js:533)
    at morphChildren (index.js:329)
    at morphEl (index.js:790)
    at morphChildren (index.js:384)
    at morphEl (index.js:790)
    at morphChildren (index.js:384)
    at morphEl (index.js:790)
    at morphChildren (index.js:384)
    at morphEl (index.js:790)

[mlrawlings]

This is fixed in 4.11.4

[abiyasa]

Thanks a lot, @mlrawlings! I can confirm that it works when I upgrade the project to Marko v4.11.4