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.67k stars 9.32k forks source link

[Bug]: The `IconGallery` doesn't work with SvelteKit #20535

Open NatoBoram opened 1 year ago

NatoBoram commented 1 year ago

Describe the bug

At https://storybook.js.org/docs/svelte/writing-docs/doc-block-icongallery, there's an example that shows how to use an IconGallery. However, when I try to use it with SvelteKit, it just crashes.

Example:

import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs'
import AcademicCap from '../lib/heroicons/20/solid/academic-cap.svelte'

<Meta title="Heroicons/Mini" />

# Mini

<IconGallery>
    <IconItem name="academic-cap">
        <AcademicCap />
    </IconItem>
</IconGallery>

Log:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot [react-dom.development.js:86:29](http://localhost:6006/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js)
Uncaught TypeError: class constructors must be invoked with 'new'
    React 16
    render chunk-MA2MUXQN.mjs:1
    promise callback*DocsRenderer/this.render chunk-MA2MUXQN.mjs:1
    renderDocs runtime.mjs:75
    renderDocs runtime.mjs:75
    renderToElement runtime.mjs:75
    renderSelection runtime.mjs:84
    onSetCurrentStory runtime.mjs:84
    handleEvent runtime.mjs:5
    handleEvent runtime.mjs:5
    Channel runtime.mjs:5
    handler runtime.mjs:10
    handleEvent runtime.mjs:10
    PostmsgTransport runtime.mjs:10
    createChannel runtime.mjs:10
    <anonymous> null:5
[react-dom.development.js:16305:27](http://localhost:6006/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js)
The above error occurred in the <Proxy<Academic-cap>> component:

Proxy<Academic-cap>
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
IconItem@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:2930:16
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
IconGallery@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:2931:19
MDXContent@http://localhost:6006/src/stories/Mini.mdx?t=1673172255195&import:7:50
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
div
withEmotionCache/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1449:46
ThemeProvider@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-CJEASUMU.js?v=10e388c1:1475:45
SourceContainer@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:3053:23
DocsContainer@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:3165:21
Docs@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-U5HOB67C.js?v=10e388c1:3314:12
MDXProvider@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-WNDIUHYG.js?v=10e388c1:28:21

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:18687:14](http://localhost:6006/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js)
Uncaught (in promise) TypeError: class constructors must be invoked with 'new'
    React 13
    render chunk-MA2MUXQN.mjs:1
    promise callback*DocsRenderer/this.render chunk-MA2MUXQN.mjs:1
    renderDocs runtime.mjs:75
    renderDocs runtime.mjs:75
    renderToElement runtime.mjs:75
    renderSelection runtime.mjs:84
    onSetCurrentStory runtime.mjs:84
    handleEvent runtime.mjs:5
    handleEvent runtime.mjs:5
    Channel runtime.mjs:5
    handler runtime.mjs:10
    handleEvent runtime.mjs:10
    PostmsgTransport runtime.mjs:10
    createChannel runtime.mjs:10
    <anonymous> null:5
[react-dom.development.js:16305:27](http://localhost:6006/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js)

To Reproduce

git clone git@github.com:NatoBoram/heroicons.svelte.git
cd heroicons.svelte
pnpm i
pnpm storybook

System

Environment Info:

  System:
    OS: Linux 6.0 Pop!_OS 22.04 LTS
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
  Binaries:
    Node: 19.3.0 - /usr/bin/node
    npm: 9.2.0 - ~/.local/share/pnpm/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 108.0
  npmPackages:
    @storybook/addon-docs: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/addon-essentials: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/addon-interactions: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/addon-links: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/blocks: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/svelte: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/sveltekit: 7.0.0-beta.20 => 7.0.0-beta.20 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
    @storybook/types: 7.0.0-alpha.44 => 7.0.0-alpha.44

Additional context

No response

NatoBoram commented 1 year ago

Docs moved to https://storybook.js.org/docs/7.0/svelte/api/doc-block-icongallery

class constructors must be invoked with 'new'

renderWithHooks@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:12171:35
mountIndeterminateComponent@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:14921:21
beginWork@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:15902:22
beginWork$1@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:19749:22
performUnitOfWork@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:19197:20
workLoopSync@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:19133:30
renderRootSync@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:19112:15
recoverFromConcurrentError@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:18732:42
performConcurrentWorkOnRoot@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:18680:30
workLoop@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:197:50
flushWork@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:176:22
performWorkUntilDeadline@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:384:29
EventHandlerNonNull*node_modules/.pnpm/scheduler@0.23.0/node_modules/scheduler/cjs/scheduler.development.js/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:405:11
node_modules/.pnpm/scheduler@0.23.0/node_modules/scheduler/cjs/scheduler.development.js@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:453:9
__require2@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-HYZYPRER.js?v=ad72788e:15:50
node_modules/.pnpm/scheduler@0.23.0/node_modules/scheduler/index.js@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:465:24
__require2@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-HYZYPRER.js?v=ad72788e:15:50
node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js/<@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:481:25
node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom.development.js@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:21556:9
__require2@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-HYZYPRER.js?v=ad72788e:15:50
node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/index.js@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-OZU74M3H.js?v=ad72788e:21568:24
__require2@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-HYZYPRER.js?v=ad72788e:15:50
@http://localhost:6006/node_modules/.cache/.vite-storybook/deps/chunk-5XGKJHDW.js?v=ad72788e:31:32