builder-vite: [Bug] - Vite transforming of stories is slow or hangs

What version of vite are you using?

4.3.8

System info and storybook versions

System: OS: macOS 13.3.1 CPU: (10) arm64 Apple M1 Max Binaries: Node: 18.4.0 - ~/.nvm/versions/node/v18.4.0/bin/node npm: 8.12.1 - ~/.nvm/versions/node/v18.4.0/bin/npm Browsers: Chrome: 113.0.5672.126 Edge: 111.0.1661.62 Safari: 16.4 npmPackages: @storybook/addon-a11y: ^7.0.12 => 7.0.12 @storybook/addon-actions: ^7.0.12 => 7.0.12 @storybook/addon-essentials: ^7.0.12 => 7.0.12 @storybook/addon-interactions: ^7.0.12 => 7.0.12 @storybook/addon-jest: ^7.0.12 => 7.0.12 @storybook/addon-links: ^7.0.12 => 7.0.12 @storybook/addon-styling: ^1.0.8 => 1.0.8 @storybook/blocks: ^7.0.12 => 7.0.12 @storybook/react: ^7.0.12 => 7.0.12 @storybook/react-vite: ^7.0.12 => 7.0.12 @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Describe the Bug

We have two Storybook 7 / Vite projects. One builds and renders but it takes some time. The other one just hangs and never recovers. The only difference between the two is the complexity of the stories. The project with the more complex stories just hangs. When running storybook build the project gets stuck with transforming and just hangs.

@storybook/cli v7.0.12

info => Cleaning outputDir: /Users/XXXXXX/Documents/ADO/forge.XXXXXX.web/docs/forge-digital-components
(node:67032) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
info => Loading presets
info => Building manager..
info => Manager built (92 ms)
info => Copying static files: /Users/XXXXXX/Documents/ADO/forge.XXXXXX.web/node_modules/@storybook/manager/static at /Users/XXXXXX/Documents/ADO/forge.XXXXXX.web/docs/forge-digital-components/sb-common-assets
info => Copying static files: /Users/XXXXXX/Documents/ADO/forge.XXXXXX.web/packages/forge-digital-components/public at /Users/XXXXXX/Documents/ADO/forge.XXXXXX.web/docs/forge-digital-components/
vite v4.3.8 building for production...

./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
transforming (85) src/components/Product/Swatch/index.jsx

Here is our main.js

import { mergeConfig } from 'vite';

/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
  staticDirs: ['../public'],
  stories: [
    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-styling",
    '@storybook/addon-a11y',
    '@storybook/addon-jest'
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  async viteFinal(config) {
    // Merge custom configuration into the default config
    return mergeConfig(config, {
      // Add storybook-specific dependencies to pre-optimization
      optimizeDeps: {
        include: [
          '@storybook/addon-links',
          '@storybook/addon-essentials',
          '@storybook/addon-interactions',
          '@storybook/addon-styling',
          '@storybook/addon-a11y',
          '@storybook/addon-jest',
        ],
      },
    });
  },
  docs: {
    autodocs: true,
  },
};
export default config;

Our preview.jsx

import React from 'react';
import '../../forge-components/src/global/scss/style.scss';
import { CssBaseline, ThemeProvider } from "@mui/material";
import { withThemeFromJSXProvider } from "@storybook/addon-styling";
import { MuiXXXXXTheme } from '@xxxxxlabs/forge-components';

export const decorators = [
  withThemeFromJSXProvider({
    themes: { MuiXXXXXTheme },
    Provider: ThemeProvider,
    GlobalStyles: CssBaseline,
  }),
];

/** @type { import('@storybook/react').Preview } */
const preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

1. How can I debug or view what is going on in the transforming process?
2. Any Vite for Storybook 7 tips to improve the performance of this transforming process?
3. Has anyone else experienced this slow or hanging behavior?

Thank you.

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.