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

[nandhiniG]

Describe the bug

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

In Dev Mode :

In prod build:

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

[greptile-apps]

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

1. 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;

2. Check Storysource Addon: Verify that the @storybook/addon-storysource is correctly configured to handle component names.

3. 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 · Edit Issue Bot Settings

[nandhiniG]

Component Display Names actually works ! the vite config didnt help ... but is there any other way we can address this ? because this includes adding displayName for all components

[vanessayuenn]

@nandhiniG this is the same issue as #20920, and that has been fixed recently. Please upgrade to the latest 8.x!