Vanilla Extract - Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep) error

[grygielj]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.4.5

What version of Remix are you using?

2.9.2

Steps to Reproduce

1. Create an empty project withnpm create @shopify/hydrogen@latest
2. Install @vanilla-extract/css and @vanilla-extract/vite-plugin
3. add vanilla extract plugin vite.config.ts

plugins: [
   hydrogen(),
   oxygen(),
   remix({
     presets: [hydrogen.preset()],
     future: {
       v3_fetcherPersist: true,
       v3_relativeSplatPath: true,
       v3_throwAbortReason: true,
     },
   }),
   tsconfigPaths(),
   vanillaExtractPlugin(),
 ],

3. Create any component with vanilla extract styles
4. Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep) error

Expected Behavior

There shouldn't be an error and vanilla-extract should work

Actual Behavior

Console errors and vanilla-extract doesn't work

[frandiox]

Thanks for reporting. We are adding h2 setup css with vanilla-extract option in #2245 and it was working there during development. Will double check again.

Also, can you try removing node_modules/.vite and try again?

[grygielj]

Thanks for reporting. We are adding h2 setup css with vanilla-extract option in #2245 and it was working there during development. Will double check again.

Also, can you try removing node_modules/.vite and try again?

Yes.

[grygielj]

@frandiox any progress on this? After merging your PR problem still occurs :(

[helloroman]

Hi @blittle 👋, I wanted to check in and ask if fixing this issue is planned for an upcoming version. We have a large project that we’d love to migrate to Vite, but we’re currently unable to do so because we use Vanilla Extract. I’d greatly appreciate any information you could provide 🙏. Cheers!

[ramiroazar]

We're experiencing the same issue and it's blocking us as well.

The steps to reproduce provided above are accurate, but here's an example repository with the issue reproduced in the test/vanilla-extract branch just in case it's useful.

As described, Vanilla Extract doesn't work with the latest release.

Importing a Vanilla Extract class causes React, Remix and Hydrogen to fail with 504 Outdated Optimize Dep, which causes all client side functionality like CartSummary to fail.