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.77k stars 9.34k forks source link

[Bug]: Uncaught TypeError: Converting circular structure to JSON when opening Storybook (Vue.js) #24013

Open AdrianBobak opened 1 year ago

AdrianBobak commented 1 year ago

Describe the bug

After opening Storybook in the browser there's an following error:

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Array'
    |     index 0 -> object with constructor 'Object'
    |     property 'errorProperties' -> object with constructor 'Object'
    |     ...
    |     property 'data' -> object with constructor 'Object'
    --- property 'telemetryError' closes the circle
    at JSON.stringify (<anonymous>)
    at stringify (chunk-UBOPZ7EI.js:34:6072)
    at WebsocketTransport.sendNow (chunk-UBOPZ7EI.js:39:9200)
    at WebsocketTransport.send (chunk-UBOPZ7EI.js:39:9098)
    at chunk-UBOPZ7EI.js:39:9338
    at Array.forEach (<anonymous>)
    at WebsocketTransport.flush (chunk-UBOPZ7EI.js:39:9318)
    at WebsocketTransport.socket.onopen (chunk-UBOPZ7EI.js:39:8786)
stringify @ chunk-UBOPZ7EI.js:34
sendNow @ chunk-UBOPZ7EI.js:39
send @ chunk-UBOPZ7EI.js:39
(anonymous) @ chunk-UBOPZ7EI.js:39
flush @ chunk-UBOPZ7EI.js:39
WebsocketTransport.socket.onopen @ chunk-UBOPZ7EI.js:39

It doesn't seem to break any functionality. I got this error after upgrading Storybook but it also occurred when I tried to install it on the project that doesn't have SB in the past. Tested with node 16.17.0 and 18.17.1

To Reproduce

  1. Run Storybook locally
  2. Open Storybook in the browser
  3. Check the console

System

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.62)
  npmPackages:
    @storybook/addon-essentials: ^7.4.0 => 7.4.0
    @storybook/addon-interactions: ^7.4.0 => 7.4.0
    @storybook/addon-links: ^7.4.0 => 7.4.0
    @storybook/blocks: ^7.4.0 => 7.4.0
    @storybook/testing-library: ^0.2.0 => 0.2.0
    @storybook/vue3: ^7.4.0 => 7.4.0
    @storybook/vue3-vite: ^7.4.0 => 7.4.0

Additional context

No response

MichaelAllenWarner commented 1 year ago

Interesting. I'm hitting a similar error with Storybook for HTML / Webpack5, but only on npm run build. Happens with Storybook 7.1 and above for me. Looks like this:

info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
10% building 0/1 entries 0/0 dependencies 0/0 modulesERR! TypeError: Converting circular structure to JSON
ERR!     --> starting at object with constructor 'Array'
ERR!     |     index 46 -> object with constructor 'Object'
ERR!     |     property 'loc' -> object with constructor 'SourceLocation'
ERR!     --- property 'tokens' closes the circle
ERR!     at JSON.stringify (<anonymous>)
ERR!     at enter (/[path]/node_modules/@storybook/csf-tools/dist/index.js:18:5390)
ERR!     at NodePath._call (/[path]/node_modules/@babel/traverse/lib/path/context.js:46:20)
ERR!     at NodePath.call (/[path]/node_modules/@babel/traverse/lib/path/context.js:36:17)
ERR!     at NodePath.visit (/[path]/node_modules/@babel/traverse/lib/path/context.js:82:31)
ERR!     at TraversalContext.visitQueue (/[path]/node_modules/@babel/traverse/lib/context.js:86:16)
ERR!     at TraversalContext.visitMultiple (/[path]/node_modules/@babel/traverse/lib/context.js:61:17)
ERR!     at TraversalContext.visit (/[path]/node_modules/@babel/traverse/lib/context.js:107:19)
ERR!     at traverseNode (/[path]/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
ERR!     at NodePath.visit (/[path]/node_modules/@babel/traverse/lib/path/context.js:88:52)

I'm using:

shilman commented 1 year ago

@yannbf could this be related to the new error reporting?

yannbf commented 1 year ago

@yannbf could this be related to the new error reporting?

Definitely, somehow telejson not handling circular dependencies properly

brupelo commented 1 year ago

Using latest storybook over here and we can reproduce this one issue as well, if it helps here's our .storybook/main.js:

// https://github.com/storybookjs/storybook/issues/24013
export default {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],

  staticDirs: ["../public"],

  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
  ],

  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },

  features: {
    emotionAlias: false,
  },

  core: {
    builder: "@storybook/builder-vite",
    disableTelemetry: true, // 👈 Disables telemetry
  },

  docs: {
    autodocs: false,
  },
};
ryan-mcginty-alation commented 1 year ago

Interesting. I'm hitting a similar error with Storybook for HTML / Webpack5, but only on npm run build. Happens with Storybook 7.1 and above for me. Looks like this:

info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
10% building 0/1 entries 0/0 dependencies 0/0 modulesERR! TypeError: Converting circular structure to JSON
ERR!     --> starting at object with constructor 'Array'
ERR!     |     index 46 -> object with constructor 'Object'
ERR!     |     property 'loc' -> object with constructor 'SourceLocation'
ERR!     --- property 'tokens' closes the circle
ERR!     at JSON.stringify (<anonymous>)
ERR!     at enter (/[path]/node_modules/@storybook/csf-tools/dist/index.js:18:5390)
ERR!     at NodePath._call (/[path]/node_modules/@babel/traverse/lib/path/context.js:46:20)
ERR!     at NodePath.call (/[path]/node_modules/@babel/traverse/lib/path/context.js:36:17)
ERR!     at NodePath.visit (/[path]/node_modules/@babel/traverse/lib/path/context.js:82:31)
ERR!     at TraversalContext.visitQueue (/[path]/node_modules/@babel/traverse/lib/context.js:86:16)
ERR!     at TraversalContext.visitMultiple (/[path]/node_modules/@babel/traverse/lib/context.js:61:17)
ERR!     at TraversalContext.visit (/[path]/node_modules/@babel/traverse/lib/context.js:107:19)
ERR!     at traverseNode (/[path]/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
ERR!     at NodePath.visit (/[path]/node_modules/@babel/traverse/lib/path/context.js:88:52)

I'm using:

  • @storybook/addon-a11y
  • @storybook/addon-essentials
  • @storybook/addon-styling
  • @storybook/addons
  • @storybook/html-webpack5
  • @storybook/theming

I am also seeing this one as well on build

Happens even if I disable all addons

ryan-mcginty-alation commented 1 year ago

Interesting. I'm hitting a similar error with Storybook for HTML / Webpack5, but only on npm run build. Happens with Storybook 7.1 and above for me. Looks like this:

info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
10% building 0/1 entries 0/0 dependencies 0/0 modulesERR! TypeError: Converting circular structure to JSON
ERR!     --> starting at object with constructor 'Array'
ERR!     |     index 46 -> object with constructor 'Object'
ERR!     |     property 'loc' -> object with constructor 'SourceLocation'
ERR!     --- property 'tokens' closes the circle
ERR!     at JSON.stringify (<anonymous>)
ERR!     at enter (/[path]/node_modules/@storybook/csf-tools/dist/index.js:18:5390)
ERR!     at NodePath._call (/[path]/node_modules/@babel/traverse/lib/path/context.js:46:20)
ERR!     at NodePath.call (/[path]/node_modules/@babel/traverse/lib/path/context.js:36:17)
ERR!     at NodePath.visit (/[path]/node_modules/@babel/traverse/lib/path/context.js:82:31)
ERR!     at TraversalContext.visitQueue (/[path]/node_modules/@babel/traverse/lib/context.js:86:16)
ERR!     at TraversalContext.visitMultiple (/[path]/node_modules/@babel/traverse/lib/context.js:61:17)
ERR!     at TraversalContext.visit (/[path]/node_modules/@babel/traverse/lib/context.js:107:19)
ERR!     at traverseNode (/[path]/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
ERR!     at NodePath.visit (/[path]/node_modules/@babel/traverse/lib/path/context.js:88:52)

I'm using:

  • @storybook/addon-a11y
  • @storybook/addon-essentials
  • @storybook/addon-styling
  • @storybook/addons
  • @storybook/html-webpack5
  • @storybook/theming

@MichaelAllenWarner I tracked this error down to having a root .storybook folder in an Nx monorepoe. If I remove that folder the error goes away.

MichaelAllenWarner commented 1 year ago

@ryan-mcginty-alation Thanks for the info. I'm not using Nx, but I do have a root .storybook folder. Don't think I can remove it though!

MichaelAllenWarner commented 1 year ago

Interesting. I'm hitting a similar error with Storybook for HTML / Webpack5, but only on npm run build. Happens with Storybook 7.1 and above for me. Looks like this:

info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
10% building 0/1 entries 0/0 dependencies 0/0 modulesERR! TypeError: Converting circular structure to JSON
ERR!     --> starting at object with constructor 'Array'
ERR!     |     index 46 -> object with constructor 'Object'
ERR!     |     property 'loc' -> object with constructor 'SourceLocation'
ERR!     --- property 'tokens' closes the circle
ERR!     at JSON.stringify (<anonymous>)
ERR!     at enter (/[path]/node_modules/@storybook/csf-tools/dist/index.js:18:5390)
ERR!     at NodePath._call (/[path]/node_modules/@babel/traverse/lib/path/context.js:46:20)
ERR!     at NodePath.call (/[path]/node_modules/@babel/traverse/lib/path/context.js:36:17)
ERR!     at NodePath.visit (/[path]/node_modules/@babel/traverse/lib/path/context.js:82:31)
ERR!     at TraversalContext.visitQueue (/[path]/node_modules/@babel/traverse/lib/context.js:86:16)
ERR!     at TraversalContext.visitMultiple (/[path]/node_modules/@babel/traverse/lib/context.js:61:17)
ERR!     at TraversalContext.visit (/[path]/node_modules/@babel/traverse/lib/context.js:107:19)
ERR!     at traverseNode (/[path]/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
ERR!     at NodePath.visit (/[path]/node_modules/@babel/traverse/lib/path/context.js:88:52)

I'm using:

  • @storybook/addon-a11y
  • @storybook/addon-essentials
  • @storybook/addon-styling
  • @storybook/addons
  • @storybook/html-webpack5
  • @storybook/theming

Thought I'd add that I can't get around this storybook build error by disabling telemetry (even with the STORYBOOK_DISABLE_TELEMETRY=1 storybook build approach -- is that the right syntax?).

maxbeatty commented 1 year ago

Could this be related to #23604? https://github.com/storybookjs/storybook/issues/23604#issuecomment-1664135522 fixed for me

MichaelAllenWarner commented 1 year ago

Could this be related to #23604? #23604 (comment) fixed for me

That indeed was my problem! Many thanks!