Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'toNodeAttrs.length')

I'm trying to diff a PHP scripts contents via fetch.

Heres index.php:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hello, world!</title>
</head>
<body>
    <h1><?php echo uniqid(); ?></h1>

    <button onclick="morph()">Morph</button>

    <script src="https://cdn.jsdelivr.net/npm/morphdom@2.6.1/dist/morphdom-umd.min.js"></script>
    <script src="morph.js"></script>
</body>
</html>

Heres morph.js:

function morph() {
    const domParser = new DOMParser();
    const currentHtml = document.documentElement.innerHTML
    const currentDom = domParser.parseFromString(currentHtml, 'text/html')

    fetch('index.php').then(response => {
        return response.text()
    }).then(newHtml => {
        const newDom = domParser.parseFromString(newHtml, 'text/html')
        morphdom(currentDom, newDom)
    })
}

This causes the following error:

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'toNodeAttrs.length')

How do I make this work?

patrick-steele-idem / morphdom

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'toNodeAttrs.length') #212