[Bug]: `show code` not displaying component names in prod build

Describe the bug

Show code displays transformed component names and [object Object] for forwarded ref components in prod build.

In Dev Mode : AnySnap 03 Jul 2024 at 10_22_18 AM AnySnap 03 Jul 2024 at 10_23_00 AM

In prod build: AnySnap 03 Jul 2024 at 10_22_36 AM AnySnap 03 Jul 2024 at 10_23_20 AM

main.ts

import { type StorybookConfig } from '@storybook/react-vite';
import { mergeConfig } from 'vite';

const config = {
    addons: [
        '@storybook/addon-a11y',
        '@storybook/addon-links',
        '@storybook/addon-styling',
        'storybook-addon-apollo-client',
        'storybook-dark-mode',
        'storybook-addon-mock',
        {
            name: '@storybook/addon-essentials',
            options: {
                actions: false,
                backgrounds: false,
                controls: false,
                docs: true,
                viewport: true,
                toolbars: true,
            },
        },
    ],
    docs: {
        autodocs: true,
    },
    framework: {
        name: '@storybook/react-vite',
        options: {},
    },
    stories: [
        '../../../apps/booking/src/**/*.stories.tsx',
        '../../../packages/booking-components/src/**/*.stories.tsx',
        '../../../packages/core/src/**/*.stories.tsx',
    ],
    core: {
        disableTelemetry: true,
    },
    typescript: {
        check: false,
        reactDocgen: false,
    },
    async viteFinal(config) {
        // Merge custom configuration into the default config
        return mergeConfig(config, {
            // Add dependencies to pre-optimization
            optimizeDeps: {
                include: ['storybook-dark-mode', '@adaptavant/*'],
            },

            resolve: {
                alias: {
                    'next/router': 'next-router-mock',
                },
            },
        });
    },
} satisfies StorybookConfig;

export default config;

Reproduction link

https://earth.anywhere.co/storybook/index.html?path=/docs/components-button--docs

Reproduction steps

1)Use storybook react + vite project 2) Add component examples 3) Run in dev mode we can see the component code is as expected in the show code. 4)Run in prod mode, using a HTTP server the component names are messed up

System

Storybook Environment Info:

  System:
    OS: macOS 13.4
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.2 - /usr/local/bin/node
    npm: 10.5.0 - /usr/local/bin/npm
    pnpm: 8.10.2 - /usr/local/bin/pnpm <----- active
  Browsers:
    Chrome: 126.0.6478.127
    Edge: 126.0.2592.87
    Safari: 16.5
  npmPackages:
    @storybook/addon-a11y: 7.6.7 => 7.6.7 
    @storybook/addon-actions: 7.6.7 => 7.6.7 
    @storybook/addon-essentials: 7.6.7 => 7.6.7 
    @storybook/addon-links: 7.6.7 => 7.6.7 
    @storybook/addon-styling: ^1.3.7 => 1.3.7 
    @storybook/addons: ^7.6.17 => 7.6.17 
    @storybook/blocks: 7.6.7 => 7.6.7 
    @storybook/react: 7.6.7 => 7.6.7 
    @storybook/react-vite: 7.6.7 => 7.6.7 
    @storybook/testing-library: ^0.2.0 => 0.2.2 
    storybook: 7.6.7 => 7.6.7 
    storybook-addon-apollo-client: ^5.0.0 => 5.0.0 
    storybook-addon-jsx: ^7.3.14 => 7.3.14 
    storybook-addon-mock: ^4.3.0 => 4.3.0 
    storybook-dark-mode: ^4.0.1 => 4.0.1

Additional context

We identified partial issue is reported and see a fix released in 8.0.2 , we tried the same but the issue still persists https://github.com/storybookjs/storybook/pull/26566

To resolve the issue with show code not displaying component names correctly in the production build, follow these steps:

Update Vite Configuration: Ensure that the Vite configuration in main.ts includes proper handling for component names in production.

import { type StorybookConfig } from '@storybook/react-vite';
import { mergeConfig } from 'vite';

const config = {
  // ... other configurations
  async viteFinal(config) {
    return mergeConfig(config, {
      optimizeDeps: {
        include: ['storybook-dark-mode', '@adaptavant/*'],
      },
      resolve: {
        alias: {
          'next/router': 'next-router-mock',
        },
      },
      build: {
        rollupOptions: {
          output: {
            manualChunks: {
              react: ['react'],
            },
          },
        },
        sourcemap: true, // Ensure sourcemaps are enabled
      },
    });
  },
} satisfies StorybookConfig;

export default config;

Check Storysource Addon: Verify that the @storybook/addon-storysource is correctly configured to handle component names.
Component Display Names: Ensure that all components have display names set explicitly, especially for forwarded ref components.

const MyComponent = React.forwardRef((props, ref) => {
  // component implementation
});
MyComponent.displayName = 'MyComponent';

These steps should help in resolving the issue with component names in the production build.

References

/code/.storybook/main.ts /code/addons/storysource /code/lib/codemod/src/transforms/testfixtures/storiesof-to-csf /code/lib/codemod/src/transforms/testfixtures/update-organisation-name /code/lib/codemod/src/transforms/testfixtures/add-component-parameters

#### 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)

storybookjs / storybook