Closed ajkl2533 closed 5 days 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:
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'],
};
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,
},
],
},
},
};
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"
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.
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.
/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
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).
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:
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 mymain.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
Additional context
No response