atlassian-labs / storybook-addon-performance

🚧 A storybook addon to help better understand and debug performance for React components.
https://storybook-addon-performance.netlify.com
Other
652 stars 32 forks source link

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted #147

Open pst37 opened 11 months ago

pst37 commented 11 months ago
image
//.storybook/main.ts

const config: StorybookConfig = {
    stories: [
        '../storybook/**/*.mdx',
        '../storybook/**/*.story.@(js|jsx|mjs|ts|tsx)'
    ],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/blocks',
        '@storybook/addon-interactions',
        {
            name: '@storybook/addon-styling',
            options: {}
        },
        '@storybook/addon-a11y',
        '@storybook/addon-designs',
        '@storybook/addon-mdx-gfm',
        'storybook-addon-performance'
    ],
    framework: {
        name: '@storybook/react-webpack5',
        options: {}
    },
    docs: {
        autodocs: 'tag'
    }
};
.storybook/preview.ts
import type { Preview } from '@storybook/react';

import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
import { withPerformance } from 'storybook-addon-performance';
import lightTheme from '../src/constants/defaultThemes/lightThemes';

/* TODO: update import for your custom theme configurations */
// import { lightTheme, darkTheme } from '../path/to/themes';

/* TODO: replace with your own global styles, or remove */
const GlobalStyles = createGlobalStyle`
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
  `;

const preview: Preview = {
    parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/
            }
        }
    },

    decorators: [
        // Adds global styles and theme switching support.
        withThemeFromJSXProvider({
            /* Uncomment for theme switching support */
            themes: {
                light: lightTheme
            },
            defaultTheme: 'light',
            Provider: ThemeProvider,
            GlobalStyles
        }),
        withPerformance
    ]
};