[Bug]: Code panel not rendering composition patterns after build

[yashaswi1004]

Describe the bug

I added code panel to the storybook using this. My Storybook with Vite renders code snippets correctly locally, but in the deployed production build, component names ('abcdef' and 'xcvgdfey') are replaced with minified versions ('z' and 'v').

Why it is happening? and how to fix this?

Reproduction link

SchwarzIT/onyx#2379

Reproduction steps

No response

System

Storybook Environment Info:

  System:
    OS: macOS 15.3
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.7.0 - /opt/homebrew/bin/node
    npm: 11.1.0 - /opt/homebrew/bin/npm
    pnpm: 10.2.1 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 133.0.6943.98
    Safari: 18.3
  npmPackages:
    @storybook/addon-a11y: ^8.5.6 => 8.5.6 
    @storybook/addon-actions: ^8.5.6 => 8.5.6 
    @storybook/addon-docs: ^8.5.6 => 8.5.6 
    @storybook/addon-essentials: ^8.5.6 => 8.5.6 
    @storybook/addon-interactions: ^8.5.6 => 8.5.6 
    @storybook/addon-knobs: ^8.0.0 => 8.0.1 
    @storybook/addon-links: ^8.5.6 => 8.5.6 
    @storybook/blocks: ^8.5.6 => 8.5.6 
    @storybook/cli: ^8.5.6 => 8.5.6 
    @storybook/preset-create-react-app: ^8.5.6 => 8.5.6 
    @storybook/react: ^8.5.6 => 8.5.6 
    @storybook/react-vite: ^8.5.6 => 8.5.6 
    @storybook/test: ^8.5.6 => 8.5.6 
    storybook: ^8.5.6 => 8.5.6 
    storybook-addon-pseudo-states: ^4.0.2 => 4.0.2 
    storybook-design-token: ^3.1.0 => 3.1.0

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This is caused by Vite's production build minification. To preserve component names in the code panel, add the following to your vite.config.js: js export default { build: { minify: true, terserOptions: { mangle: { keep_classnames: true, keep_fnames: true }, compress: { keep_classnames: true, keep_fnames: true } } } } For Storybook specifically, you can also configure this in .storybook/main.js: js export default { framework: '@storybook/react-vite', viteFinal: (config) => { config.build = config.build || {}; config.build.terserOptions = { mangle: { keep_classnames: true, keep_fnames: true }, compress: { keep_classnames: true, keep_fnames: true } }; return config; } };

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.

Edit Issue Bot Settings · Greptile

[yashaswi1004]

my code works fine for simple patterns , not renders properly only for composition patterns....will the above 2 solutions work even in this case?