Migrated from CRA, using builder-vite, No stories rendered, inifinite spinner and no console errors.

[visualjeff]

What version of vite are you using?

3.2.5

System info and storybook versions

System:

• OS: macOS 11.7.1
• CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
• Memory: 964.79 MB / 16.00 GB
• Shell: 5.8 - /bin/zsh

Binaries:

• Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
• npm: 8.14.0 - ~/.nvm/versions/node/v16.13.1/bin/npm

Browsers:

• Chrome 107

devDependencies:

• "@storybook/addon-a11y": "6.5.10",
• "@storybook/addon-actions": "6.5.10",
• "@storybook/addon-console": "1.2.3",
• "@storybook/addon-docs": "6.5.10",
• "@storybook/addon-essentials": "6.5.10",
• "@storybook/addon-links": "6.5.10",
• "@storybook/builder-vite": "0.2.5",
• "@storybook/node-logger": "6.5.10",
• "@storybook/preset-scss": "1.0.3",
• "@storybook/react": "6.5.10",
• "@storybook/theming": "6.5.10",
• "sass": "^1.56.2"

Describe the Bug

Migrated from CRA using builder-vite and all I'm seeing a loadering spinner. So my question is, can a team use builder-vite with Storybook 6.5 or should we wait until Storybook 7 is formally released?

.storybook/main.js

module.exports = {
  staticDirs: ['../public'],
  stories: [
    '../src/content/*.stories.mdx',
    '../src/components/**/*.stories.mdx',
    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y'
  ],
  features: {
    modernInlineRendering: true,
    emotionAlias: false,
    buildStoriesJson: true,
  },
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-vite',
  },
   async viteFinal(config, { configType }) {
    // Needed only for development mode: `npm run storybook`
    config.optimizeDeps = configType === 'PRODUCTION' ? config.optimizeDeps : {
      ...(config.optimizeDeps || {}),
      include: [
        ...(config?.optimizeDeps?.include || []),
        // Fix: failed to fetch dynamically import module, avoid cache miss for dependencies on the first load
        '@storybook/components',
        '@storybook/store',
        // Add all addons that imported in the `preview.js` or `preview.ts` file and used in exported constants
        '@storybook/addon-console'
      ],
    }
    return config;
  }
};

.storybook/preview.jsx

import React from 'react';

// Need this scss for correct fonts in Storybook
import '../src/global/scss/style.scss';

// Storybook Addons/
import { setConsoleOptions } from '@storybook/addon-console';

//Theme Providers
import {
  ThemeProvider as MuiThemeProvider,
  StyledEngineProvider,
} from '@mui/material/styles';

import { MuiTheme } from '../src/global/MuiTheme';

const withThemeProvider = (Story, context) => {
  return (
    <StyledEngineProvider injectFirst>
      <MuiThemeProvider theme={MuiTheme}>
        <Story {...context} />
      </MuiThemeProvider>
    </StyledEngineProvider>
  );
};

export const decorators = [withThemeProvider];

setConsoleOptions({
  panelExclude: [],
});

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  // Storybook a11y addon configuration
  a11y: {
    // the target DOM element
    element: '#root',
    // sets the execution mode for the addon
    manual: false,
  },
  // previewTabs: { 'storybook/docs/panel': { index: -1 } },
  controls: { expanded: true },
  // viewMode: 'docs',
};

Link to Minimal Reproducible Example

No response

Participation

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

[IanVS]

@visualjeff It's definitely possible to use the vite builder with 6.5, although it does work better and is easier to configure in 7.0. If you're not seeing any errors in the console or the terminal, are you seeing any activity in the network tab? I see that you do not have storyStoreV7 enabled, which means that all of your stories and associated components are sent to the browser all at once at page load, rather than on demand when you load each story. Since vite does not compile files together in dev, this can take quite a while to send to the browser for large projects.

If that doesn't seem to be the issue, maybe something else is happening. Do builds complete successfully, or do you get an error? If they complete, do you still see the infinite spinner when you load it up (with npx http-server storybook-static for instance)?

[visualjeff]

First off Ian, thank you for your time.

I will set the storyStoreV7 so its enabled.

Builds using vite do complete fine.

Anyway, let me try storyStoreV7 and get back.

Jeff

[visualjeff]

So the left nav rendered pretty quick but the iframe content take some time (Skeletons showing) and eventually after a few minutes they did render. Here is what the terminal was showing:

Is there a configuration setting I'm missing?

[IanVS]

eventually after a few minutes they did render

Is that with storyStoreV7 turned on? That seems like a long time, though I have seen times on the order of 30 seconds to a minute before, for initial startup. You may want to look to see if you have any index.js files that re-export from lots of other files, which can cause more modules than necessary to be loaded.

You could also try out the 7.0 beta, which may be a bit faster to start up from cold, because the manager is pre-built and webpack isn't used. If you decide to try it out, you can run npx sb@next upgrade --prerelease

[visualjeff]

With storyStoreV7 it does seem to start off faster. That is an interesting point about index.js files being re-exported lots of other files. We do re-exporting. Do you know if Storybook has any best practices pertaining to this?

Really appreciate your help and input. I'm making some progress. Stories are being rendered. It just takes a while.