Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
DRYmag opened this issue Sep 16, 2024 · 4 comments · May be fixed by #30114
Open

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

DRYmag opened this issue Sep 16, 2024 · 4 comments · May be fixed by #30114
Labels
bug good first issue help wanted sev:S3

Comments

@DRYmag
Copy link

DRYmag commented Sep 16, 2024

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
Copy link

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', // <---
  // ...
}

@SarvT
Copy link

SarvT commented Oct 28, 2024

@vanessayuenn I want to work on this issue, can it be assigned to me?

@szantnerb
Copy link

I also noticed this change in behavior when I upgraded a project from Storybook v7 to v8.
This PR introduced an additional piece of information to the story wrapper component's selector: a story UID as an attribute (STORY_UID_ATTRIBUTE).
This attribute could contain accents (derived from meta & story names) but Angular is unable to handle components that have selectors with accented attributes e.g. app-component[spécial-character].
Filtering the characters of this attribute does solve the problem (I changed the source in my node_modules to quickly verify).
(The targetSelector was somewhat similiarly already filtered in case it contained forbidden characters)

@msmx-mnakagawa msmx-mnakagawa linked a pull request Dec 20, 2024 that will close this issue
Open
8 tasks
@msmx-mnakagawa
Copy link

msmx-mnakagawa commented Dec 20, 2024 •
edited
Loading

I have tried creating a PR #30114 that just filters accent related characters from a story UID, based on @szantnerb's suggestion.
Could someone take a look at the PR, if possible?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug good first issue help wanted sev:S3
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix angular accent character issue msmx-mnakagawa/storybook
6 participants
@PotatoesMaster @szantnerb @vanessayuenn @DRYmag @SarvT @msmx-mnakagawa