[BUG] Vite dev server hangs on initial page load

[jplhomer]

Describe the bug
Vite's dev server seems to hang when running a fresh project. It seems to happen on the first page load, where the initial SSR response is returned, the client loads, and then Vite detects new dependencies so it starts a reload.

The page never fully seems to reload. Requests are hanging in the Network tab (see screenshot).

We also sometimes see errors related to headers being sent during streaming & the standard "Can't use Switch outside Router" which is usually a red herring #64

To Reproduce
Steps to reproduce the behaviour:

1. Create a new Hydrogen project, or run in the monorepo with the latest Vite dev server & starter template
2. Start the dev server
3. Observe the behavior

Expected behaviour
The dev server should start up and be snappy. Any dependency refreshes should happen instantly.

Screenshots

Additional context
Add any other context about the problem here. eg.

• Hydrogen version: 0.6.0
• Node version: v16
• Vite version: 2.6.13

[jplhomer]

@frandiox Curious if you're seeing this and if you have any ideas!

My initial thoughts:

• Something related to a newer version of Vite? Monorepo is locked at 2.6.2 and it doesn't seem to happen then
• Something related to the app tree in the new starter template?
• Something related to fix: make sure all errors present a nice error to the user in dev mode #108?

[jplhomer]

Also, I am seeing some server components e.g. ShopifyServerProvider get loaded in the client, as well as some hefty libraries like graphql. This happens when we re-export server components in the same places we pull components for the client module.

However, I refactored a bit and was still able to reproduce, so I don't think it's related.

[jplhomer]

This kinda helps?

import {defineConfig} from 'vite';
import hydrogen from '@shopify/hydrogen/plugin';

import shopifyConfig from './shopify.config';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [hydrogen(shopifyConfig)],
  optimizeDeps: {
    include: ['@headlessui/react'],
  },
});

Since Header.client.jsx is the first time we see Headless UI in the client.

Not sure though.

[morganmccunn]

This only started happening later in the day on Friday so something related to Shopify/hydrogen#108 seems plausible 🤔

[jplhomer]

Confirmed that adding optimizeDeps: {include: ['@headlessui/react']}, to vite.config.js in the starter template fixes our issue in the short term. IMO we should add this to the starter template, cut a patch release, and update the StackBlitz so we are unblocked for Monday morning.

That gives us time to investigate the real issue which is: when Hydrogen's starter template includes dependencies that need optimization after they're loaded via e.g. client components, Vite attempts to refresh the page, and then the server stops responding, flat-out.

Super mysterious. I added console.log to the very top of the Hydrogen middleware, and on the refresh attempt it doesn't even make it to the log point. So something is really screwy.

I don't think it was something introduced on Friday, it's just that we added headlessui/react to our client-side stack recently, which is what makes us suddenly aware of the issue.

[frandiox]

@jplhomer Ah I see, so that's why I didn't see this earlier. I normally test in the branch for #7 where this dependency is already optimized. I'm going to cherry-pick that commit and add it to main branch 👍

[frandiox]

@jplhomer I think this is not happening anymore even without the optiimizedDeps after Shopify/hydrogen#168 and Shopify/hydrogen#144 were merged so I'm closing this for now 👍

[Shahzaib342]

Hi there I am facing this issue and hydrogen app does not seems to be load correctly on npm run dev I get this blank page

and in console you can see [vite] connecting......

Any help?

[frandiox]

@Shahzaib342 I cannot reproduce this anymore. Can you try running the dev server with yarn dev --force? Just to make sure this is not Vite caching something. Otherwise, try removing node_modules and update to latest Hydrogen 0.8.0.

[Shahzaib342]

Hi @frandiox thanks for the reply. I tried "yarn dev --force" and also tried to change Hydrogen to 0.8.0. But still getting same issue. My node version is v16.13.1 and npm version is 8.2.0.

I am following this documentation https://shopify.dev/custom-storefronts/hydrogen/getting-started on Ubuntu 20.04.3 LTS.

This is what I am getting

[Shahzaib342]

Tried same steps on windows and it worked. But it has to work on linux let me know if you find a work around?

Note: On windows I also got the same error but just refreshing the page again fixed it. And everytime I create a new instance it gives me same error but refreshing it again fix it that's strange.

[ObjectAssign]

For some reason, my laravel 9 project all of the sudden just keeps loading... i stashed all changes, and it continued? how can vite just blow up? ... it is something with vite..