Error: failed to execute 'insertBefore' on 'Node'

[scottdixon]

What is the location of your example repository?

https://github.com/scottdixon/hydrogen-meta-exports-bug

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.7.8

What version of Remix are you using?

2.10.1

Steps to Reproduce

• Run npm run dev
• Go to http://localhost:3000/
• Click the Sneakers link
• Click the Home link

The storefront will throw a 500 error:

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Findings so far:

• I suspect it's got something to do with Tailwind. Commenting out tailwindcss() from vite.config.js prevents the issue.
• Can't replicate with h2 preview.
• A fresh Remix app doesn't exhibit the same behaviour.

Expected Behavior

Meta exports should work.

Actual Behavior

The storefront throws a 500:

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

[wizardlyhel]

Not a meta export issue - remix-run/remix#9242

This is very likely an issue that only appears in dev

[juanpprieto]

As a temporary workaround, I believe upgrading to React 19 seems to solve this issue.

[fafifox]

I got the same error on a fresh install, seems to happen only the first time you visit a page

Shopify:   Mock.shop
Language:  TypeScript
Styling:   Tailwind (v4 alpha)
Markets:   Subfolders
npm run dev

[wizardlyhel]

Hey @fafifox , we are aware of this bug but it does seems like it is something we need to upgrade Hydrogen to React 19 to solve this.

It is a bit annoying but it is a bug that only happens while in local development

[stefaansterk]

remix-run/remix#9242 (comment)
changing the order as mentioned in the comment fixed it for me