Stoybook UI loads instantly but the content takes forever to load

Running -

{ 
  "storybook-builder-vite": "0.1.10",
  "vite": "2.6.14"
}

After I run yarn storybook the pages loads instantly, but then, it takes several minutes for it to actually show anything. in the logs, I get a lot of -

10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/doctrine.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/react-is.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/@base2_pretty-print-object.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/memoizerific.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/lodash_mapValues.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/lodash_pick.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/synchronous-promise.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/lodash_isPlainObject.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/lodash_pickBy.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/lodash_startCase.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/slash.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/stable.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/fast-deep-equal.js?v=b1467143. 10:29:00 AM [vite] Failed to load source map for /node_modules/.vite/uuid-browser_v4.js?v=b1467143.

After it actually starts working, I don’t get instant feedback on every change. Instead of doing HMR, it reloads the entire story.

my vite.config.js -

  export default defineConfig({
  plugins: [
    react({ }),
  ],
});

also tried -

export default defineConfig({
  plugins: [
    react({
      exclude: /\.stories\.(t|j)sx?$/,
    }),
  ],
});

and had the config from previous version -

import reactRefresh from '@vitejs/plugin-react-refresh';

export default {
  server: {
    plugins: [reactRefresh()],
  }
};

All behave the same.

Would love some help with that please. In other projects it works fine. Not sure what am I missing.

[Ox24]

Hey guys, thx to @IanVS i was able to fix it.

After starting storybook i got this message: 10:43:34 PM [vite] new dependencies found: history, preact, @mdx-js/preact, @storybook/addon-docs/blocks, updating... This caused storybook not to load properly. To fix this i added optimizeDeps to the viteFinal with my stories as entries and optimizeDeps.include the dependencies from above. The final result is this:

  viteFinal: async (config) => {
    return {
      ...config,
      optimizeDeps: {
        ...config.optimizeDeps,
        // Entries are specified relative to the root
        entries: [`${path.relative(config.root, path.resolve(__dirname, '../src'))}/**/*.stories.tsx`],
        include: [...(config.optimizeDeps?.include ?? []), "history", "preact", "@mdx-js/preact", "@storybook/addon-docs/blocks"],
      },
    };
  },

[bertybot]

Hey guys, thx to @IanVS i was able to fix it.

After starting storybook i got this message: 10:43:34 PM [vite] new dependencies found: history, preact, @mdx-js/preact, @storybook/addon-docs/blocks, updating... This caused storybook not to load properly. To fix this i added optimizeDeps to the viteFinal with my stories as entries and optimizeDeps.include the dependencies from above. The final result is this:

  viteFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
      },
      optimizeDeps: {
        ...config.optimizeDeps,
        // Entries are specified relative to the root
        entries: [`${path.relative(config.root, path.resolve(__dirname, '../src'))}/**/*.stories.tsx`],
        include: [...config.optimizeDeps.include, "history", "preact", "@mdx-js/preact", "@storybook/addon-docs/blocks"],
      },
    };
  },

Works great good job dudes! I did have to do some super lazy null coalescing to get the prod build to work ...(config?.optimizeDeps?.include ?? [])

Please excuse the laziness