chromaui / storybook-addon-pseudo-states

CSS pseudo-classes for Storybook
MIT License
88 stars 28 forks source link

With storybook@8.0.5 and storybook-addon-pseudo-states@3.0.0: `Uncaught ReferenceError: Icons is not defined` #111

Closed wegry closed 5 months ago

wegry commented 5 months ago

Similarly to https://github.com/chromaui/storybook-addon-pseudo-states/issues/108#issuecomment-2020044981, I'm seeing stories fail to render when storybook-addon-pseudo-states is enabled.

Uncaught ReferenceError: Icons is not defined
    at B (manager-bundle.js:2:6698)
    at renderWithHooks (chunk-UOBNU442.js:92:907)
    at mountIndeterminateComponent (chunk-UOBNU442.js:96:25851)
    at beginWork (chunk-UOBNU442.js:98:28381)
    at HTMLUnknownElement.callCallback2 (chunk-UOBNU442.js:31:42734)
    at Object.invokeGuardedCallbackImpl (chunk-UOBNU442.js:31:43261)
    at invokeGuardedCallback (chunk-UOBNU442.js:31:44569)
    at beginWork$1 (chunk-UOBNU442.js:115:5396)
    at performUnitOfWork (chunk-UOBNU442.js:111:56150)
    at workLoopSync (chunk-UOBNU442.js:111:54884)

Things of note in my project:

  1. We're still on React 17. Maybe this is conflicting somehow with this storybook change.
  2. We're using @storybook/addon-webpack5-compiler-babel. We can't use swc (and are still using babel) because of styled-jsx incompatibilities.
  3. Using Yarn 4.
// .storybook/main.ts
import {dirname, join} from 'node:path';
import type {StorybookConfig} from '@storybook/react-webpack5';
export default {
  core: {
    disableTelemetry: true, // 👈 Disables telemetry
  },
  addons: [
    {
      name: 'storybook-addon-swc',
      options: {
        enable: true,
        // styled-jsx doesn't work with PnP and swc-loader
        enableSwcLoader: false,
        enableSwcMinify: true,
        swcLoaderOptions: {},
        swcMinifyOptions: {},
      },
    },
    ...[
      '@storybook/addon-webpack5-compiler-babel',
      '@storybook/addon-controls',
      '@storybook/addon-actions',
      'storybook-dark-mode',
      '@storybook/addon-docs',
      '@storybook/addon-measure',
      // Stories render with this addon commented out.
      'storybook-addon-pseudo-states',
      '@storybook/addon-viewport',
      '@storybook/addon-interactions',
    ].map(getAbsolutePath),
  ],
  typescript: {
    // The default react-docgen can't handle template literals
    reactDocgen: 'react-docgen-typescript',
  },
  stories: ['**/*.stories.@(ts|tsx)'],
  framework: '@storybook/react-webpack5',
  docs: {
    defaultName: 'Overview',
    autodocs: true,
  },
} satisfies StorybookConfig;

export const framework = getAbsolutePath('@storybook/react');

function getAbsolutePath(value: string) {
  return dirname(require.resolve(join(value, 'package.json')));
}
github-actions[bot] commented 5 months ago

:rocket: Issue was released in v3.0.1 :rocket: