[Bug]: vite build.outDir does not contain all Storybook build files with React Vite (TypeScript) setup

[vneogi199]

Describe the bug

Running storybook build for React Vite (TypeScript) setup,

Default behavior: All generated files are present in storybook-static directory

When changing build.outDir for vite config:

viteFinal: async (config, options) => {
  const overrides: Partial<InlineConfig> = {
    build: {
      outDir: 'mydir/storybook',
    },
  };
  const final = mergeConfig(config, overrides);
  return final;
},

build.outDir contains iframe + assets:

storybook-static folder contains index.html + storybook build files:

Expectation: all generated files must be in build.outDir (mydir/storybook) Current behavior: some generated files are still present in storybook-static directory

Reproduction link

https://stackblitz.com/edit/github-mcfjck-6msrma?file=.storybook%2Fmain.ts

Reproduction steps

1. Go to above stackblitz link
2. Run yarn run build-storybook
3. Expect all build files to be in mydir/storybook, but some files are still generated in storybook-static location

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.3.0-alpha.4 => 8.3.0-alpha.4 
    @storybook/addon-interactions: ^8.3.0-alpha.4 => 8.3.0-alpha.4 
    @storybook/addon-links: ^8.3.0-alpha.4 => 8.3.0-alpha.4 
    @storybook/addon-onboarding: ^8.3.0-alpha.4 => 8.3.0-alpha.4 
    @storybook/blocks: ^8.3.0-alpha.4 => 8.3.0-alpha.4 
    @storybook/react: ^8.3.0-alpha.4 => 8.3.0-alpha.4 
    @storybook/react-vite: ^8.3.0-alpha.4 => 8.3.0-alpha.4 
    @storybook/test: ^8.3.0-alpha.4 => 8.3.0-alpha.4 
    storybook: ^8.3.0-alpha.4 => 8.3.0-alpha.4

Additional context

No response

[greptile-apps[bot]]

Disclaimer This information might be inaccurate, due to it being generated automatically To ensure all generated files are placed in the specified build.outDir (mydir/storybook), modify the build-storybook script in your package.json to include the --output-dir option. Update the script as follows:

"scripts": {
  "build-storybook": "build-storybook --output-dir mydir/storybook"
}

This will direct Storybook to place all build files in the specified directory, ensuring no files are left in the default storybook-static directory.

References

/code/builders/builder-vite /code/builders /code/builders/builder-vite/README.md /code/frameworks/angular/src/builders/build-storybook/schema.json /code/builders/builder-webpack5 /code/builders/builder-vite/src /code/frameworks/web-components-vite /docs/_snippets/storybook-vite-builder-ts-configure.md /code/builders/builder-vite/package.json /code/frameworks/html-webpack5 /docs/_snippets/main-config-builder-custom-config.md /code/lib/cli-storybook /docs/_snippets/main-config-vite-final.md /docs/get-started/frameworks/react-vite.mdx /docs/get-started/frameworks/svelte-vite.mdx /code/.storybook /code/sandbox/bench-react-vite-default-ts-test-build /docs/builders/vite.mdx /test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts /code/builders/builder-webpack5/src/preview /test-storybooks/ember-cli/ember-output/storybook-docgen /code/core/src/core-server /code/addons/docs/template/stories /docs/configure/webpack.mdx /code/frameworks/server-webpack5

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)