fix(gatsby): e.remove() is not a function when using Gatsby Head API

[marvinjude]

Description

Adding a custom babel config with the loose option set to false causes some conversion that leads the error below

One unhandled runtime error found in your files. See the list below to fix it:

Error in function eval in ./.cache/head/head-export-handler-for-browser.js:18
e.remove is not a function

./.cache/head/head-export-handler-for-browser.js:18
Open in Editor
16 | const removePrevHeadElements = () => {
17 | const prevHeadNodes = [...document.querySelectorAll([data-gatsby-head])]

18 | prevHeadNodes.forEach(e => e.remove())
| ^
19 | }
20 |
21 | const onHeadRendered = () => {`

This PR fixes it by directly iterating over the NodeLists without creating new arrays and removing unnecessary spread operators

Also address issue with IE not having .remove() by using node.parentNode.removeChild(node)

Documentation

https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/

Related Issues

Fixes #36247

[wardpeet]

This will break in older browser versions where nodeList does not contain forEach. You'll have to figure out the issue differently. What exactly is the issue with [...]?

[marvinjude]

What exactly is the issue with [...]?

#36247 (comment)

Good catch 👍 I'd do a for...of instead

[wardpeet]

What happens if you change it into Array.from ?

[marvinjude]

Array.from works fine — turns out we didn't even need to create new arrays in the first place