CODEWITHSUNDEEP
react-nativestorybook
Brandon J Brotsky
Brandon J Brotsky

Reputation: 523

TypeError: Converting circular structure to JSON with StorybookJS on React Native

This happens whenever I navigate to a new Story within the Storybook Navigator. Thanks!

ExceptionsManager.js:126 Unhandled JS Exception: TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HooksContext'
    |     property 'currentContext' -> object with constructor 'Object'
    --- property 'hooks' closes the circle

I'm using React Native 0.61.5 and @storybook/react-native 5.3.9

enter image description here

Upvotes: 4

Views: 3853

Answers (2)

Jeff Gu Kang
Jeff Gu Kang

Reputation: 4879

In my case, setting onDeviceUI to false solves this issue when I use storybook web UI.

storybook/index 

const StorybookUIRoot = getStorybookUI({
  asyncStorage: require('@react-native-community/async-storage').AsyncStorage,
  onDeviceUI: false,
  shouldPersistSelection: true,
  shouldDisableKeyboardAvoidingView: true,
  // isUIHidden: true,
})

Upvotes: 0

Bobby Moogs
Bobby Moogs

Reputation: 68

I'm dealing with the same issue and unfortunately don't have enough experience with Storybook or React Native to diagnose.

However, I was able to patch the module as described in https://github.com/storybookjs/storybook/issues/9294, i.e. "hooks.currentContext = Object.assign({}, context, { hooks: null });"

To reiterate, this is not a perfect solution, as the original bug comes from the nested, circular relationship between currentContext and hooks. This simply sets hooks to null to terminate the circular structure.

Upvotes: 3

Related Questions