react-native: React native fails with JSON.serialization issue

Thx @doctyper - it works for me too!

My 5 cents to folks who are not familiar with patches. To apply the suggested patch (with npm):

1. npm i patch-package
2. Add script to package.json to apply the patch after every install: "postinstall": "patch-package
3. Replace hooks.currentContext = context; with hooks.currentContext = Object.assign({}, context, { hooks: null }); in the file node_modules/@storybook/addons/dist/hooks.js
4. Run npx patch-package @storybook/addons
5. A file named @storybook+addons+{VERSION}.patch in the patches folder will be created and applied every time you run npm install

I just ran into this issue as well.

The error comes from the use of json-fn, which does not guard against circular references in JSON objects.

There is a circular reference in hooks.ts. context includes a reference to hooks, which has a parameter currentContext, which itself includes a reference to hooks, hence the circular ref.

I’m using the following patch to workaround the issue:

diff --git a/node_modules/@storybook/addons/dist/hooks.js b/node_modules/@storybook/addons/dist/hooks.js
index 6c88e84..8ad6678 100644
--- a/node_modules/@storybook/addons/dist/hooks.js
+++ b/node_modules/@storybook/addons/dist/hooks.js
@@ -264,7 +264,7 @@ var applyHooks = function applyHooks(applyDecorators) {
       var hooks = context.hooks;
       hooks.prevMountedDecorators = hooks.mountedDecorators;
       hooks.mountedDecorators = new Set([getStory].concat(_toConsumableArray(decorators)));
-      hooks.currentContext = context;
+      hooks.currentContext = Object.assign({}, context, { hooks: null });
       hooks.hasUpdates = false;
       var result = decorated(context);
       numberOfRenders = 1;

Hey, I’ve created a PR to fix it in the main storybook repo.

We still are in the middle of migrating out React Native from Storybook monorepo, so I can’t promise when exactly the fix will be available, but I will try to get it out as soon as I can.

I am sorry that RN Storybook was abandoned for a while. Soon RN Storybook is going to be stable (that is why we are moving it out of main monorepo) and issues like these should stop popping up.

+1

@Gongreg please you can check this thanks

Hi @jonathanmachado , if you need this fixed urgently, there is already a working patch in this thread, posted by jenskuhrjorgensen.

Thanks @jenskuhrjorgensen for the explanation of how to create patches! That worked perfectly for me!

Thx @doctyper - it works for me too! My 5 cents to folks who are not familiar with patches. To apply the suggested patch:

1. Replace hooks.currentContext = context; with hooks.currentContext = Object.assign({}, context, { hooks: null }); in the file node_modules/@storybook/addons/dist/hooks.js
2. Run npx patch-package @storybook/addons
3. A file named @storybook+addons+{VERSION}.patch in the patches folder will be created and applied every time you run npm install

@jenskuhrjorgensen you still need to install patch-package in your dependencies though?

@simonepizzamiglio you should add it as a dependency and then, in your package.json scripts phase add the following: "scripts": { ... "postinstall": "patch-package", ... } This way, every time you run a yarn install, the patch will be applied afterwards.

Thx @doctyper - it works for me too!

My 5 cents to folks who are not familiar with patches. To apply the suggested patch:

1. Replace hooks.currentContext = context; with hooks.currentContext = Object.assign({}, context, { hooks: null }); in the file node_modules/@storybook/addons/dist/hooks.js
2. Run npx patch-package @storybook/addons
3. A file named @storybook+addons+{VERSION}.patch in the patches folder will be created and applied every time you run npm install

@jenskuhrjorgensen you still need to install patch-package in your dependencies though?

@arlyon Thanks for posting that diff! It worked for me!

Hopefully, the next version fixes this issue. This has been a huge headache for me!

I just ran into this issue as well.

The error comes from the use of json-fn, which does not guard against circular references in JSON objects.

There is a circular reference in hooks.ts. context includes a reference to hooks, which has a parameter currentContext, which itself includes a reference to hooks, hence the circular ref.

I’m using the following patch to workaround the issue:

diff --git a/node_modules/@storybook/addons/dist/hooks.js b/node_modules/@storybook/addons/dist/hooks.js
index 6c88e84..8ad6678 100644
--- a/node_modules/@storybook/addons/dist/hooks.js
+++ b/node_modules/@storybook/addons/dist/hooks.js
@@ -264,7 +264,7 @@ var applyHooks = function applyHooks(applyDecorators) {
       var hooks = context.hooks;
       hooks.prevMountedDecorators = hooks.mountedDecorators;
       hooks.mountedDecorators = new Set([getStory].concat(_toConsumableArray(decorators)));
-      hooks.currentContext = context;
+      hooks.currentContext = Object.assign({}, context, { hooks: null });
       hooks.hasUpdates = false;
       var result = decorated(context);
       numberOfRenders = 1;

I can confirm that this fix ‘works’ but can be subtly buggy. For my purposes it is “good enough” to tide me over.

Great! 😃

Storybook 5.3.14 fixed the issue for me. Thanks @Gongreg !

Hey, sadly not yet. But this is on my todo list for this week.

Any update on this issue ?

You are absolutely right, @simonepizzamiglio and @davidnuvolar. I’ve updated my previous comment - thanks!

Dealing with this issue as well. Any traction on this?

Default configuration with sb stopped working after beta.25

@mi5ha

Unfortunately, the proposed change doesn’t support mutation of context obtained from useStoryContext:

const context = useStoryContext()
context.foo = 'bar'

As an alternative, we can use telejson as we do in channel-postmessage