Vite and MiniOxygen errors when using vanilla-extract and formik

[ramiroazar]

What is the location of your example repository?

https://github.com/ramiroazar/hydrogen-storefront/tree/test/formik

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.7.4

What version of Remix are you using?

2.11.2

Steps to Reproduce

To reproduce using example repository:

1. git clone [email protected]:ramiroazar/hydrogen-storefront.git
2. git checkout test/formik
3. npm install
4. npm run dev

To reproduce from scratch:

1. npm create @shopify/hydrogen@latest (Use sample data from mock.shop, TypeScript, Vanilla Extract)
2. npm install formik
3. Replicate changes from test/formik branch in example repository (ie. ramiroazar/hydrogen-storefront@main...test/formik)
4. npm run dev

Expected Behavior

Both the basic Formik example and the Vanilla Extract styles should render without any errors.

Actual Behavior

We get the following critical Vite and MiniOxygen errors in both the terminal and the browser.

Error during module fetch: Error: There is a new version of the pre-bundle for "/Users/ramiroazar/repository/hydrogen-storefront/node_modules/.vite/deps_ssr/react-fast-compare.js?v=d280c6ba", a page reload is going to ask for it.

MiniOxygen encountered an error while running your app's entry point

Removing either the Vanilla Extract class on this line or the Formik form on this line makes the error disappear, but only after restarting the dev server.

Adding either one back doesn't throw any errors while the dev server is running, but throws the same error after restarting the server.

I wasn't able to replicate this in a project using Hydrogen 2024.4.6 and Remix 2.9.2.

Not sure if this is related to issue #2366, but the MiniOxygen error is very similar.

It may also be related to issue #2266, because of the ERR_OUTDATED_OPTIMIZED_DEP error code.