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

Storybook doesn't display Docs page #128

Closed
morewings opened this issue Oct 26, 2021 · 22 comments
Closed

Storybook doesn't display Docs page #128

morewings opened this issue Oct 26, 2021 · 22 comments

Comments

@morewings
Copy link

morewings commented Oct 26, 2021 •
edited
Loading

MDX story is not rendering for 0.1.3 version. I see these two messages in console:

render was not supported :( !
renderToDOM was not supported :( !

MRP is available here https://github.com/morewings/forge/tree/master/packages/library-vite
@IanVS
Copy link
Member

IanVS commented Oct 26, 2021

Can you try adding "@storybook/csf-tools": "^6.4.0-beta.20" to your dependencies and see if that helps?

@morewings
Copy link
Author

@IanVS Just did it. Had this error

Uncaught TypeError: mdxComponentAnnotations is undefined
    targetIds Canvas.js:56
    getPreviewProps2 Canvas.js:55
    Canvas2 Canvas.js:80
    React 17
    _renderDocsAsync/_callee/_callee$/< renderDocs.js:100
    _callee$ renderDocs.js:99
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep renderDocs.js:5
    _next renderDocs.js:7
    promise callback*asyncGeneratorStep renderDocs.js:5
    _next renderDocs.js:7
    _asyncToGenerator renderDocs.js:7
    _asyncToGenerator renderDocs.js:7
    _renderDocsAsync renderDocs.js:110
    renderDocsAsync renderDocs.js:17
    renderDocs renderDocs.js:13
    _callee7$ PreviewWeb.js:679
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    promise callback*asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    render2 PreviewWeb.js:692
    _callee9$ PreviewWeb.js:697
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    promise callback*asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    renderDocs PreviewWeb.js:742
    _callee6$ PreviewWeb.js:588
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    promise callback*asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    promise callback*asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    renderSelection PreviewWeb.js:611
    onSetCurrentStory PreviewWeb.js:283
    node_modules chunk-FOHYFM3A.js:2140
    handleEvent index.js:167
    node_modules chunk-FOHYFM3A.js:2034
    node_modules chunk-FOHYFM3A.js:2332
    handleEvent index.js:283
    PostmsgTransport2 index.js:79
    createChannel index.js:348
    start start.js:40
    <anonymous> index.js:8
Canvas.js:56:25
    targetIds Canvas.js:56
    map self-hosted:221
    getPreviewProps2 Canvas.js:55
    Canvas2 Canvas.js:80
    React 17
    _renderDocsAsync/_callee/_callee$/< renderDocs.js:100
    _callee$ renderDocs.js:99
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep renderDocs.js:5
    _next renderDocs.js:7
    (Async: promise callback)
    asyncGeneratorStep renderDocs.js:5
    _next renderDocs.js:7
    _asyncToGenerator renderDocs.js:7
    _asyncToGenerator renderDocs.js:7
    _renderDocsAsync renderDocs.js:110
    renderDocsAsync renderDocs.js:17
    renderDocs renderDocs.js:13
    _callee7$ PreviewWeb.js:679
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    (Async: promise callback)
    asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    render2 PreviewWeb.js:692
    _callee9$ PreviewWeb.js:697
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    (Async: promise callback)
    asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    renderDocs PreviewWeb.js:742
    _callee6$ PreviewWeb.js:588
    tryCatch runtime.js:63
    invoke runtime.js:294
    defineIteratorMethods runtime.js:119
    asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    (Async: promise callback)
    asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    (Async: promise callback)
    asyncGeneratorStep2 PreviewWeb.js:16
    _next PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    _asyncToGenerator2 PreviewWeb.js:18
    renderSelection PreviewWeb.js:611
    onSetCurrentStory PreviewWeb.js:283
    onSetCurrentStory self-hosted:1175
    handleEvent index.js:168
    forEach self-hosted:205
    handleEvent index.js:167
    Channel2 index.js:52
    handler index.js:96
    handleEvent index.js:283
    handleEvent self-hosted:1175
    (Async: EventListener.handleEvent)
    PostmsgTransport2 index.js:79
    createChannel index.js:348
    start start.js:40
    <anonymous> index.js:8
    InnerModuleEvaluation self-hosted:2371
    InnerModuleEvaluation self-hosted:2371
    evaluation self-hosted:2332

The above error occurred in the <Canvas2> component:

Canvas2@http://localhost:6006/node_modules/.vite/@storybook_addon-docs.js?v=7dbdfa7e:11961:51
MDXCreateElement<@http://localhost:6006/node_modules/.vite/chunk-A3ILXKDU.js?v=7dbdfa7e:137:24
wrapper@http://localhost:6006/node_modules/.vite/chunk-A3ILXKDU.js?v=7dbdfa7e:132:20
MDXCreateElement<@http://localhost:6006/node_modules/.vite/chunk-A3ILXKDU.js?v=7dbdfa7e:137:24
MDXContent@http://localhost:6006/src/components/Button/Button.stories.mdx?import:9:20
AddContext2@http://localhost:6006/node_modules/.vite/@storybook_addon-docs.js?v=7dbdfa7e:13155:18
page
div
Styled(div)
div
Styled(div)
MDXProvider2@http://localhost:6006/node_modules/.vite/chunk-A3ILXKDU.js?v=7dbdfa7e:123:23
ThemeProvider2
SourceContainer@http://localhost:6006/node_modules/@storybook/addon-docs/dist/esm/blocks/SourceContainer.js:97:18
DocsContainer@http://localhost:6006/node_modules/@storybook/addon-docs/dist/esm/blocks/DocsContainer.js:47:17

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. react-dom.development.js:20085:14

@IanVS
Copy link
Member

IanVS commented Oct 27, 2021

I was able to work around the issue in your repo by adding this to the top level package.json:

"resolutions": {
    "@storybook/csf-tools": "6.4.0-beta.20"
  }

This is only necessary until the official release of 6.4.0, which would then satisfy the semver range specified by storybook-builder-vite.

Note also, there are some ^^ in the package.json of your reproduction. Also, having older versions of storybook in library-cra could cause problems if their versions are hoisted to the root, so you might want to consider upgrading storybook in lock step between all your workspaces.

@Psvensso
Copy link

Can also confirm that it works in my workspace repo with an explicit "@storybook/csf-tools": "^6.4.0-beta.20", i did not have any conflicts and we using nohoist ** but still needed to add it explicit.
Maybe add it to the example explicity as well

@Angry-Sparrow
Copy link

I try

"resolutions": {
    "@storybook/csf-tools": "6.4.0-beta.20"
  }

but it had no effect.

image

However，My project is nothing different，it works normal. I don't know why.

@Angry-Sparrow
Copy link

After I install

    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.5",
    "@mui/material": "^5.0.6",

MDX story is not rendering for 0.1.3 version.

image

@IanVS
Copy link
Member

IanVS commented Oct 27, 2021

That seems related to storybookjs/storybook#16099.

@Angry-Sparrow
Copy link

storybookjs/storybook#16099

like but not.
I tried all of the methods in #16.99, but it didn't work.

@IanVS
Copy link
Member

IanVS commented Oct 27, 2021

@leesgithub2019 could you please open another issue and provide a reproduction? It's difficult to troubleshoot otherwise.

@Angry-Sparrow
Copy link

could you please open another issue and provide a reproduction? It's difficult to troubleshoot otherwise.

well.

@IanVS
Copy link
Member

IanVS commented Oct 27, 2021

This issue is an unfortunate consequence of how beta versions work in semver, combined with the loose coupling of packages across the storybook ecosystem. Once 6.4.0 is released, it will start to work again.

The only other thing I can think to do is to create a peer dependency on @storybook/csf-tools, but that's kind of a bummer too. Maybe enough people are having this issue that it would be worth it to avoid confusion, though...

@morewings
Copy link
Author

@IanVS Your fix helped to run my example, thanks. I don't see props' annotations, though. Should it be like that?

@IanVS
Copy link
Member

IanVS commented Oct 27, 2021

Yes, that's a separate problem, unfortunately. #103

@morewings
Copy link
Author

@IanVS also I started see this warning now.

Warning: Cannot update a component (`SourceContainer`) while rendering a different component (`storyFn`). To locate the bad setState() call inside `storyFn`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
storyFn
InlineStory2@http://localhost:6006/node_modules/.vite/@storybook_addon-docs.js?v=b66c141a:10123:17
Story2@http://localhost:6006/node_modules/.vite/@storybook_addon-docs.js?v=b66c141a:10153:18
MDXProvider2@http://localhost:6006/node_modules/.vite/chunk-A3ILXKDU.js?v=b66c141a:123:23
div
Story4@http://localhost:6006/node_modules/.vite/@storybook_addon-docs.js?v=b66c141a:11210:47
MDXCreateElement<@http://localhost:6006/node_modules/.vite/chunk-A3ILXKDU.js?v=b66c141a:137:24
div
div
div
Styled(div)
ZoomElement@http://localhost:6006/node_modules/.vite/@storybook_addon-docs.js?v=b66c141a:1916:15
div
Styled(div)
div
Styled(div)
div
Styled(div)
Preview2@http://localhost:6006/node_modules/.vite/@storybook_addon-docs.js?v=b66c141a:3878:18
MDXProvider2@http://localhost:6006/node_modules/.vite/chunk-A3ILXKDU.js?v=b66c141a:123:23
Canvas2@http://localhost:6006/node_modules/.vite/@storybook_addon-docs.js?v=b66c141a:11961:51
MDXCreateElement<@http://localhost:6006/node_modules/.vite/chunk-A3ILXKDU.js?v=b66c141a:137:24
wrapper@http://localhost:6006/node_modules/.vite/chunk-A3ILXKDU.js?v=b66c141a:132:20
MDXCreateElement<@http://localhost:6006/node_modules/.vite/chunk-A3ILXKDU.js?v=b66c141a:137:24
MDXContent@http://localhost:6006/src/components/Button/Button.stories.mdx?import:9:20
AddContext2@http://localhost:6006/node_modules/.vite/@storybook_addon-docs.js?v=b66c141a:13155:18
page
div
Styled(div)
div
Styled(div)
MDXProvider2@http://localhost:6006/node_modules/.vite/chunk-A3ILXKDU.js?v=b66c141a:123:23
ThemeProvider2
SourceContainer@http://localhost:6006/node_modules/@storybook/addon-docs/dist/esm/blocks/SourceContainer.js:97:18
DocsContainer@http://localhost:6006/node_modules/@storybook/addon-docs/dist/esm/blocks/DocsContainer.js:47:17 react-dom.development.js:67:29
    React 5
    handleSnippetRendered SourceContainer.js:108
    handleEvent chunk-FOHYFM3A.js:2140
    handleEvent chunk-FOHYFM3A.js:2139
    handler2 chunk-FOHYFM3A.js:2069
    emit chunk-FOHYFM3A.js:2074
    jsxDecorator jsxDecorator.js:276
    triggerEffects chunk-LAQIXTHW.js:1244
    triggerEffects chunk-LAQIXTHW.js:1242
    renderListener chunk-LAQIXTHW.js:1194
    handleEvent chunk-FOHYFM3A.js:2140
    handleEvent chunk-FOHYFM3A.js:2139
    handler2 chunk-FOHYFM3A.js:2069
    emit chunk-FOHYFM3A.js:2074
    storyProps @storybook_addon-docs.js:11247
    boundStoryFn2 @storybook_addon-docs.js:11193
    prepareForInline config.js:9
    storyFn @storybook_addon-docs.js:11204
    React 9
    unstable_runWithPriority scheduler.development.js:468
    React 5
    _callee$ @storybook_addon-docs.js:11141
    tryCatch chunk-5ZWMBWAJ.js:47
    invoke chunk-5ZWMBWAJ.js:184
    defineIteratorMethods chunk-5ZWMBWAJ.js:80
    asyncGeneratorStep2 @storybook_addon-docs.js:11038
    _next @storybook_addon-docs.js:11056
    (Async: promise callback)
    asyncGeneratorStep2 @storybook_addon-docs.js:11047
    _next @storybook_addon-docs.js:11056
    _asyncToGenerator2 @storybook_addon-docs.js:11061
    _asyncToGenerator2 @storybook_addon-docs.js:11053
    useStories @storybook_addon-docs.js:11152
    useStories @storybook_addon-docs.js:11130
    React 5
    unstable_runWithPriority scheduler.development.js:468
    React 4
    unstable_runWithPriority scheduler.development.js:468
    React 5
    _callee$ @storybook_addon-docs.js:11141
    tryCatch chunk-5ZWMBWAJ.js:47
    invoke chunk-5ZWMBWAJ.js:184
    defineIteratorMethods chunk-5ZWMBWAJ.js:80
    asyncGeneratorStep2 @storybook_addon-docs.js:11038
    _next @storybook_addon-docs.js:11056
    (Async: promise callback)
    asyncGeneratorStep2 @storybook_addon-docs.js:11047
    _next @storybook_addon-docs.js:11056
    _asyncToGenerator2 @storybook_addon-docs.js:11061
    _asyncToGenerator2 @storybook_addon-docs.js:11053
    useStories @storybook_addon-docs.js:11152
    useStories @storybook_addon-docs.js:11130
    React 5
    unstable_runWithPriority scheduler.development.js:468
    React 4
    unstable_runWithPriority scheduler.development.js:468
    React 5
    _callee$ @storybook_addon-docs.js:11141
    tryCatch chunk-5ZWMBWAJ.js:47
    invoke chunk-5ZWMBWAJ.js:184
    defineIteratorMethods chunk-5ZWMBWAJ.js:80
    asyncGeneratorStep2 @storybook_addon-docs.js:11038

Yes, that's a separate problem, unfortunately

Do you have plans to fix it? I can try to fix this problem myself. But my current knowledge of vite and this builder is very little. So learning will take time.

@IanVS
Copy link
Member

IanVS commented Oct 27, 2021

I haven't seen that new error before, @morewings. Would you mind opening a new issue with a description of how to reproduce it?

As for annotations on the docs page, I believe it's going to require some changes in storybook itself, which the maintainers are planning on making for 7.0.

@blowsie
Copy link

blowsie commented Mar 30, 2022

I ran into something similar, although I haven't confirmed its directly related to storybook-vite

image

Reproduction
https://github.com/blowsie/vue3-vitesse-storybook-pnpm/tree/master/packages/ui

@IanVS
Copy link
Member

IanVS commented Mar 30, 2022

@blowsie can you please try upgrading to the latest version of storybook-builder-vite?

@IanVS
Copy link
Member

IanVS commented Mar 30, 2022 •
edited
Loading

Oh I see in your reproduction that you have. Hmmmmm. I'll take a look. This should have been fixed in 0.1.22. maybe try clearing your node_modules and browser cache, just in case?

@blowsie
Copy link

blowsie commented Mar 30, 2022

Oh I see in your reproduction that you have. Hmmmmm. I'll take a look. This should have been fixed in 0.1.22. maybe try clearing your node_modules and browser cache, just in case?

This was a clean installation today, I rimraf node_modules a few times whilst getting things up and running, and have cache disabled in my browser when dev tools is open

@IanVS
Copy link
Member

IanVS commented Mar 30, 2022

@blowsie I cloned your repo, tried to npm install and got errors about artifactory, removed the package-lock.json, ran npm i (in the sub-package), and npm run storybook worked fine, showing the story correctly. I then removed node_modules, and ran pnpm i in the root project, and then again, npm run storybook in the ui project, and that worked fine too. I think you must somehow have an old version of the builder, perhaps in a parent node_modules. If you're still having troubles, would you mind opening a new issue, since I don't think it's related to the one in this issue.

Speaking of which, since 6.4.0 has been released I'm going to close out this issue. If anyone still has problems that isn't already captured in another issue, please open one with a reproduction repo, that's extremely helpful.

@IanVS IanVS closed this as completed Mar 30, 2022
@blowsie
Copy link

blowsie commented Mar 30, 2022

@IanVS just to be sure, did you check the docs tab?

@IanVS
Copy link
Member

IanVS commented Mar 30, 2022

@blowsie yep, works fine!
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@blowsie @morewings @Psvensso @IanVS @Angry-Sparrow