React HMR stuck in reload loop

[amogower]

Thanks for all the great work on this builder so far - really excited to get this implemented into our projects.

I installed the latest version after seeing that React HMR was fixed

Starts up properly but then gets trapped in a reload loop with the following output:

Followed by this output in the browser with Storybook showing a spinner in the component window:

Not sure if anyone else has experience this? Any ideas on what's going on here?

Thanks in advance!

[IanVS]

I've found that it helps to specify a list of entries in my optimizeDeps config. So my viteFinal looks something like this:

async viteFinal(config) {
    return {
      ...config,
      optimizeDeps: {
        ...config.optimizeDeps,
        // Entries are specified relative to the root
        entries: [`${path.relative(config.root, path.resolve(__dirname, '../src'))}/**/*.stories.tsx`],
        // Extra dependencies that aren't resolved through entries
        include: [...config.optimizeDeps.include, 'storybook-dark-mode'],
      },
    };
  },

As for the global error, it looks like one of the packages you are using is made to run in node, or relies on being polyfilled. If you still get that error after updating your viteFinal, you will need to either polyfill global or try window.global = window;, probably in your .storybook/preview.tsx file.

[amogower]

Thanks @IanVS

I will experiment with your suggestions tomorrow and let you know how I get on!

[amogower]

@IanVS based on your suggestions, I was able to fix the global issue but we are still experiencing the looping reloading... This isn't a problem for earlier versions of storybook-builder-vite - is it related to changes made for HMR?

[IanVS]

I don't see any HMR loop in what you've posted so far. Your first screenshot is what happens when vite isn't able to pre-bundle all of your dependencies in one go. It hits one that it doesn't know about, bundles it, and restarts, then hits another. That long process should only happen once, unless you're clearing the vite cache every time you start up storybook. If you let that finish, kill storybook, and start it again, do you see the same messages? Also, can you share your viteFinal config?

[eirslett]

This is how Vite works - it's lazy, so it doesn't optimize a dependency until it discovers it - when you browse in your application. Then it optimized the deps and triggers a browser reload. (And then it discovers another dependency, reload - and then another dependency, and so on). The refreshing goes on until all dependencies have been optimized.

If you add all these dependencies to optimizeDeps, it will happen when you start Vite instead of lazily. That should improve your startup experience.