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]: Storybook Composition Fails When Composing a Valid External Storybook #29268

Closed
procload opened this issue Oct 2, 2024 · 1 comment · Fixed by #29453
Closed

[Bug]: Storybook Composition Fails When Composing a Valid External Storybook #29268

procload opened this issue Oct 2, 2024 · 1 comment · Fixed by #29453
Labels
bug composition help wanted sev:S2 ui

Comments

@procload
Copy link

procload commented Oct 2, 2024

Describe the bug

I encountered an error when attempting to compose an external Storybook into a new Storybook project. To verify that the issue wasn’t with my code, I set up a brand new Storybook and tried to compose another Storybook into it that I know is correct. This also failed with the same error, indicating that the problem lies within Storybook JS itself.

Reproduction link

https://stackblitz.com/edit/github-y9vne8?file=.storybook/main.js&preset=node

Reproduction steps

1. Setup a new Storybook Project

  • npx create-react-app storybook-composition-test
  • cd storybook-composition-test
  • npx sb init

2. Configure Storybook to compose an external Storybook:

module.exports = {
  stories: [],
  refs: {
    'external-storybook': {
      title: 'External Storybook',
      url: 'https://external-storybook-url.com', // Replace with the URL of the known working Storybook
    },
  },
};

3. Run Storybook and navigate to a composed Story

  • Navigate to a composed Story within Storybook
  • Resize the screen to 500px wide
  • Notice the content disappear

This doesn't happen when the Storybook is out of composition and referenced directly. It only happens under composition.

System

Storybook Environment Info:

  System:
    OS: macOS 14.7
    CPU: (10) x64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.1 - ~/node_modules/.bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm <----- active
    pnpm: 7.17.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 129.0.6668.71
    Edge: 129.0.2792.65
    Safari: 18.0
  npmPackages:
    @storybook/addon-essentials: ^8.3.4 => 8.3.4
    @storybook/addon-interactions: ^8.3.4 => 8.3.4
    @storybook/addon-links: ^8.3.4 => 8.3.4
    @storybook/addon-onboarding: ^8.3.4 => 8.3.4
    @storybook/blocks: ^8.3.4 => 8.3.4
    @storybook/react: ^8.3.4 => 8.3.4
    @storybook/react-vite: ^8.3.4 => 8.3.4
    @storybook/test: ^8.3.4 => 8.3.4
    eslint-plugin-storybook: ^0.9.0 => 0.9.0
    storybook: ^8.3.4 => 8.3.4

Additional context

The exact errors are:

.localservice@runtime.134daa3c.js:26 TypeError: Cannot use 'in' operator to search for 'parent' in undefined
    at useFullStoryName (runtime.js:3444:19)
    at MobileNavigation (runtime.js:3448:110)
    at Xh (globals-runtime.js:3339:13)
    at Wk (globals-runtime.js:5796:23)
    at Vk (globals-runtime.js:5549:13)
    at Uk (globals-runtime.js:5541:27)
    at Jk (globals-runtime.js:5530:9)
    at Ok (globals-runtime.js:5306:81)
    at Fk (globals-runtime.js:5355:30)
    at jg (globals-runtime.js:2656:17)
console.error @ .localservice@runtime.134daa3c.js:26
Mi @ globals-runtime.js:3743
M7.r.callback @ globals-runtime.js:3756
ih @ globals-runtime.js:2967
lk @ globals-runtime.js:5045
jk @ globals-runtime.js:5009
ik @ globals-runtime.js:4991
Xk @ globals-runtime.js:5608
Qk @ globals-runtime.js:5583
Fk @ globals-runtime.js:5359
jg @ globals-runtime.js:2656
(anonymous) @ globals-runtime.js:5207
globals-runtime.js:2661 Uncaught TypeError: Cannot use 'in' operator to search for 'parent' in undefined
    at useFullStoryName (runtime.js:3444:19)
    at MobileNavigation (runtime.js:3448:110)
    at Xh (globals-runtime.js:3339:13)
    at Wk (globals-runtime.js:5796:23)
    at Vk (globals-runtime.js:5549:13)
    at Uk (globals-runtime.js:5541:27)
    at Jk (globals-runtime.js:5530:9)
    at Ok (globals-runtime.js:5306:81)
    at Fk (globals-runtime.js:5355:30)
    at jg (globals-runtime.js:2656:17)
@shilman shilman moved this to Empathy Backlog in Core Team Projects Oct 3, 2024
@afrinashar
Copy link

I would like to work on this.

This was referenced Oct 25, 2024
Closed
Merged
@github-project-automation github-project-automation bot moved this from Empathy Backlog to Done in Core Team Projects Nov 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug composition help wanted sev:S2 ui
Projects
Core Team Projects
Archived in project
Milestone
No milestone
3 participants
@procload @shilman @afrinashar