search

storybookjs / storybook

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

[Bug]: Accent in Meta's title break the doc page #29132

Open DRYmag opened 1 month ago

DRYmag commented 1 month ago

Describe the bug

If accent are used in Meta's title, the doc page is broken, stories can't be retrieve from partial url.

If the title is : 'Example/Button with an "é" accent', I have the error : Error: NG05104: The selector "-accent--primary--primary-inner-1" did not match any elements. Find more at https://angular.dev/errors/NG05104.

Reproduction link

https://stackblitz.com/edit/github-uxwf7j?file=src%2Fstories%2Fbutton.stories.ts&preset=node

Reproduction steps

  1. open the reproduction link
  2. open the file containing the stories of button
  3. Meta's title contain un accent : 
    const meta: Meta<ButtonComponent> = {
  title: 'Example/Button with an "é" accent',
  component: ButtonComponent,
  // ...
}
  4. Go to the button doc page : https://zzmivoxlzggithub-zhd0--6006--28a8ce1b.local-corp.webcontainer.io/?path=/docs/example-button-with-an-%C3%A9-accent--docs
  5. The stories can't be shown due to the error : 
    Error: NG05104: The selector "-accent--primary--primary-inner-1" did not match any elements. Find more at https://angular.dev/errors/NG05104
at locateHostElement (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:61196:32))
at ComponentFactory.create (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:65447:46))
at ApplicationRef.bootstrap (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:81016:38))
at /vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:82366:20
at _ZoneDelegate.invoke (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:146238:160))
at Object.onInvoke (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:56293:25))
at _ZoneDelegate.invoke (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:146238:48))
at ZoneImpl.run (/vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:145988:37))
at /vendors-node_modules_storybook_addon-docs_angular_index_js-node_modules_storybook_addon-essen-0ca6f6.iframe.bundle.js:148405:30

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/addon-essentials: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/addon-interactions: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/addon-links: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/addon-onboarding: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/angular: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/blocks: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    @storybook/test: ^8.4.0-alpha.0 => 8.4.0-alpha.0 
    storybook: ^8.4.0-alpha.0 => 8.4.0-alpha.0

Additional context

I use on my project the version 8.3.0 but I also reproduce on stackblitz with the version 8.4.0-aplha.

PotatoesMaster commented 4 weeks ago

Same problem here.

As a temporary workaround, I defined an id manually in my stories.

const meta: Meta<ButtonComponent> = {
  title: 'Example/Button with an "é" accent',
  id: 'Example/Button with an eacute', // <---
  // ...
}