storybook [Bug]: 无法在docs.container中访问上下文,

fnvucqvd  于 4个月前  发布在  其他
关注(0)|答案(9)|浏览(44)

描述bug

你好,
我们正在运行v7 beta 13版本,并尝试更新到beta 28版本。我们使用docs.container来完成重复的文档介绍。现在我们无法从context.storyById()中读取数据,出现了以下错误:

Error: No primary story defined for docs entry. Did you forget to use `<Meta>`

尽管我们的*.mdx文件中包含了<Meta of={Stories} />这一行。

重现问题

Reproduction:

https://github.com/will-stone/storybook-docs-container-bug

The offending line: https://github.com/will-stone/storybook-docs-container-bug/blob/main/.storybook/preview.jsx#L4

The MDX file with the `Meta` component: https://github.com/will-stone/storybook-docs-container-bug/blob/main/src/stories/Button.mdx?plain=1#L5

系统信息

System:
    OS: macOS 12.6.2
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.12.1 - ~/.local/share/nvm/v18.12.1/bin/node
    npm: 8.19.2 - ~/.local/share/nvm/v18.12.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 108.0.2
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.28 => 7.0.0-beta.28
    @storybook/addon-interactions: ^7.0.0-beta.28 => 7.0.0-beta.28
    @storybook/addon-links: ^7.0.0-beta.28 => 7.0.0-beta.28
    @storybook/blocks: ^7.0.0-beta.28 => 7.0.0-beta.28
    @storybook/react: ^7.0.0-beta.28 => 7.0.0-beta.28
    @storybook/react-vite: ^7.0.0-beta.28 => 7.0.0-beta.28
    @storybook/testing-library: ^0.0.13 => 0.0.13

其他相关信息

能够在docs.container中访问上下文非常有用,因为这意味着我们可以在其中实现具有故事感知的条件逻辑。

qnakjoqk

qnakjoqk1#

我认为我们正在经历相同的问题。我们使用 docs.containerstorybook-dark-mode 集成到独立文档页面中。我们的页面有 <Meta>,但我们仍然得到相同的错误:

Error: No primary story defined for docs entry. Did you forget to use `<Meta>`?
    at DocsContext.storyById (http://localhost:3000/sb-preview/runtime.js:82:803)
    at container (http://localhost:3000/main.iframe.bundle.js:78:21)
    at renderWithHooks (http://localhost:3000/vendors-node_modules_storybook_addon-docs_dist_index_mjs-node_modules_storybook_addon-essenti-2ee5bf.iframe.bundle.js:65004:18)
    at mountIndeterminateComponent (http://localhost:3000/vendors-node_modules_storybook_addon-docs_dist_index_mjs-node_modules_storybook_addon-essenti-2ee5bf.iframe.bundle.js:68768:13)
    at beginWork (http://localhost:3000/vendors-node_modules_storybook_addon-docs_dist_index_mjs-node_modules_storybook_addon-essenti-2ee5bf.iframe.bundle.js:70281:16)
    at beginWork$1 (http://localhost:3000/vendors-node_modules_storybook_addon-docs_dist_index_mjs-node_modules_storybook_addon-essenti-2ee5bf.iframe.bundle.js:76120:14)
    at performUnitOfWork (http://localhost:3000/vendors-node_modules_storybook_addon-docs_dist_index_mjs-node_modules_storybook_addon-essenti-2ee5bf.iframe.bundle.js:75251:12)
    at workLoopSync (http://localhost:3000/vendors-node_modules_storybook_addon-docs_dist_index_mjs-node_modules_storybook_addon-essenti-2ee5bf.iframe.bundle.js:75160:5)
    at renderRootSync (http://localhost:3000/vendors-node_modules_storybook_addon-docs_dist_index_mjs-node_modules_storybook_addon-essenti-2ee5bf.iframe.bundle.js:75128:7)
    at recoverFromConcurrentError (http://localhost:3000/vendors-node_modules_storybook_addon-docs_dist_index_mjs-node_modules_storybook_addon-essenti-2ee5bf.iframe.bundle.js:74544:20)

在我们的 docs.container 中调用 storyById() 的代码:

const preview: Preview = {
    // ...
    docs: {
      container: ({ children, context }) => {
        const isDark = useDarkMode();

        const { id, storyById } = context;
        const story = storyById(id);
        const { parameters } = story;
        const { docs } = parameters;
        docs.theme = isDark ? themes.dark : themes.light;

        // see https://github.com/storybookjs/storybook/issues/8622
        // no dependencies on this effect is deliberate
        // otherwise it won't run when the docs page is re-activated
        useEffect(() => {
          // if docs-root is hidden that means the docs page is not active
          // for some reason this component never gets unmounted
          if (document.getElementById("docs-root")?.hidden) return;

          document.body.classList.remove("dark", "light");
          document.documentElement.dataset.theme = isDark ? "dark" : "light";
        });

        return <DocsContainer context={context}>{children}</DocsContainer>;
      },
    },
}
5m1hhzi4

5m1hhzi42#

你有没有一个可以分享的复制库?如果没有,你能创建一个吗?去$x_{1}e_{0}f_{1}x$或者查看$x_{1}e_{1}f_{1}x$.谢谢!

8e2ybdfx

8e2ybdfx3#

为了避免推卸责任,但原始问题描述已经有了一个很好的复现。对于我们的具体问题,似乎在Storybook 7中的其他更改消除了我们需要调用storyById()的需求,这解决了我们的问题。抱歉给您带来了困扰!

68de4m5k

68de4m5k4#

我也遇到了同样的问题 - 在自定义文档容器中的未附加文档页面中调用 storyById() 时,会出现上述错误。然而,在 Storybook 7 之前,我们可以直接在 context 对象上访问元数据,如参数或标题,而现在不再可能。我找不到任何文档说明我们现在应该如何在 SB7 中执行此操作。
例如,在版本 6 中,我们可以这样做:

export const DocsContainer: ({children, context}) => {

const title = context?.title;
const myParameter = context?.parameters?.myParameter;

.....
}

在附加的文档中,我们现在可以用 context.storyById() 替换 context 以获取对主要故事的引用,这样就可以了。但在未附加的文档中,这会抛出错误。context 对象上有一个名为 attachedCsfFile 的属性,似乎包含元数据,但它没有任何文档说明,也没有包含在 typescript typings 中。
有人知道 Storybook 7 中现在“正确”的做法是什么吗?

vddsk6oq

vddsk6oq5#

我也遇到了同样的问题。
我曾尝试通过以下方法获取上下文的全局变量:

const story = context.storyById();
const {globals} = context.getStoryContext(storyId);

但我发现我可以直接通过 contexxt.store.globals.globals 访问全局参数;
然而, DocsContextProps 类型不包含这个属性。
所以我只使用了 any 类型Assert。

const {globals} = (context as any).store.globals;

我不确定这是否是有效的方法,但我希望有人能通过这种方法得到帮助。

zpf6vheq

zpf6vheq6#

你好!感谢你打开这个问题,但它已经被标记为 stale ,因为我们需要更多的信息来继续。你能提供我们所需的复现或额外的信息吗?这将帮助我们更好地理解问题。我们很想解决这个问题,但没有你的帮助我们是无法做到的!

k7fdbhmy

k7fdbhmy7#

对于其他也在尝试使用storybook-dark-mode在storybook 7^中更改主题的人,这里有一个关于我的preview.tsx的例子。
这个开关可以切换侧边栏/工具栏的主题,文档页面的主题,并为单个故事预览添加深色/浅色类名(根据你的应用程序自定义此设置)。

oipij1gg

oipij1gg8#

你好!感谢你打开这个问题,但它已经被标记为 stale ,因为我们需要更多的信息来继续。你能提供我们所需的复现或额外的信息吗?这将有助于我们更好地理解问题。我们很想解决这个问题,但没有你的帮助我们无法做到!

原始帖子已经提供了一个复现。此外,这是一个通用问题,未附加文档文件的参数和元信息在上下文对象上没有暴露出来,除了 (context as any).attachedCSFFile. meta ,这是不安全的,也不是类型安全的。

在 SB7 之前,这些值可以直接在上下文对象上轻松访问。

plicqrtu

plicqrtu9#

抱歉在这里出现了长时间的延迟和关于复制的困惑。
我查看了原始的复制(升级到7.4版本),看起来像是竞争条件。如果设置了主要的故事,那么可以获取故事对象,但是看起来主要的故事是在第一次渲染之后才设置的,此时文档容器已经出错了。我会尝试与@tmeasday合作,看看是否有快速修复的方法。

相关问题