storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.51k stars 9.3k forks source link

[Bug]: `@storybook/addon-a11y` breaks built Storybook #28770

Closed ajkl2533 closed 5 days ago

ajkl2533 commented 2 months ago

Describe the bug

I upgraded SB from v6.5 to v8.2 and switched builder from Webpack to Vite, that match project builder. We have an automation that deploy built Storybook to Github Pages when new version of our library is released. After latest release we notice that the deployed version of Storybook stopped working and error message is showing up:

Failed to fetch dynamically imported module: https://securityscorecard.github.io/design-system/broken/assets/preview-DVmcd0jj.js

The file exist I checked that.

After some fiddling I was able to isolate the issue to the @storybook/addon-a11y. When I comment out this addon in my main.ts file and deploy built files everything works as before.

The interesting part is that it doesn't work only when deployed, if you serve built Storybook locally it works even with the addon. Same the dev Storybook works just fine no matter if the addon is enabled or not.


Storybook configuration: https://github.com/securityscorecard/design-system/blob/main/.storybook/main.ts#L21

Broken deploy w/ addon: https://securityscorecard.github.io/design-system/broken/?path=/docs/overview--docs Broken files: https://github.com/securityscorecard/design-system/tree/gh-pages/broken

Working deploy w/o addon: https://securityscorecard.github.io/design-system/2.1.0/?path=/story/overview--docs Working files: https://github.com/securityscorecard/design-system/tree/gh-pages/2.1.0

Previous version on SB 6.5: https://securityscorecard.github.io/design-system/2.0.1/?path=/story/overview--page

Reproduction link

https://securityscorecard.github.io/design-system/broken/?path=/docs/overview--docs

Reproduction steps

No response

System

Storybook Environment Info:

  System:
    OS: macOS 14.6
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 22.4.1 - ~/.nvm/versions/node/v22.4.1/bin/node
    Yarn: 4.3.1 - /opt/homebrew/bin/yarn <----- active
    npm: 8.19.4 - ~/Projects/design-system/node_modules/.bin/npm
  Browsers:
    Chrome: 127.0.6533.89
    Edge: 127.0.2651.74
    Safari: 17.6
  npmPackages:
    @storybook/addon-a11y: ^8.2.6 => 8.2.6 
    @storybook/addon-actions: ^8.2.6 => 8.2.6 
    @storybook/addon-designs: ^8.0.3 => 8.0.3 
    @storybook/addon-essentials: ^8.2.6 => 8.2.6 
    @storybook/blocks: ^8.2.6 => 8.2.6 
    @storybook/manager-api: ^8.2.6 => 8.2.6 
    @storybook/preview-api: ^8.2.6 => 8.2.6 
    @storybook/react: ^8.2.6 => 8.2.6 
    @storybook/react-vite: ^8.2.6 => 8.2.6 
    @storybook/theming: ^8.2.6 => 8.2.6 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.2.6 => 8.2.6

Additional context

No response

greptile-apps[bot] commented 2 months ago

Disclaimer This information might be inaccurate, due to it being generated automatically To address the issue with @storybook/addon-a11y breaking the built Storybook when deployed, follow these steps:

  1. Update main.ts Configuration: Ensure that the @storybook/addon-a11y is correctly configured in your .storybook/main.ts file. It should look like this:

    export default {
     addons: ['@storybook/addon-a11y'],
    };
  2. Check preview.ts for Global Overrides: Verify if there are any global overrides in .storybook/preview.ts that might be affecting the addon:

    export const parameters = {
     a11y: {
       config: {
         rules: [
           {
             id: 'autocomplete-valid',
             enabled: false,
           },
         ],
       },
     },
    };
  3. Inspect package.json Dependencies: Ensure that the @storybook/addon-a11y version in your package.json matches the latest compatible version:

    "@storybook/addon-a11y": "^8.2.6"
  4. Review vite.config.ts: Check your Vite configuration for any settings that might interfere with dynamic imports. Ensure that the configuration allows for proper handling of dynamic imports.

  5. Debug Deployment: Since the issue occurs only when deployed, add logging or debugging steps to your deployment pipeline to capture more information about the failure.

Refer to the README for more details on configuring the addon.

References

/code/addons/a11y/README.md /code/addons/a11y/package.json /docs/_snippets/storybook-a11y-register.md /docs/addons/addon-migration-guide.mdx /code/lib/cli/src/automigrate/fixes/new-frameworks.ts /code/lib/cli/src/automigrate/fixes/addon-postcss.ts /code/addons/interactions/package.json /code/addons/actions/package.json /code/addons/onboarding/package.json /code/addons/links/package.json /code/addons/measure/package.json /code/addons/onboarding/CHANGELOG.md /code/core/src/csf-tools/ConfigFile.test.ts /code/addons/a11y /code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts /.github/DISCUSSION_TEMPLATE/help.yml /code/core/src/server-errors.ts /code/lib/cli/src/automigrate/fixes/cra5.ts /code/addons/storysource /docs/_snippets/storybook-a11y-install.md /code/addons/a11y/template /docs/migration-guide/from-older-version.mdx /docs/_snippets/custom-build-script-production.md /.github/comments/invalid-link.md /code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts

#### 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)
ajkl2533 commented 5 days ago

Closing this, because the issue was probably related to Github Pages itself and it's Jekyll build system. Even the broken build works now.

Only thing that changed in meantime was adding empty .nojekyll file in the root (https://github.com/orgs/community/discussions/23166).