React native fails with JSON.serialization issue #13

zhigang1992 · 2020-01-02T02:39:35Z

Describe the bug
Default configuration with sb stopped working after beta.25

To Reproduce
Steps to reproduce the behavior:

npx react-native init testSB --template react-native-template-typescript
npx -p @storybook/cli sb init --type react_native
Launch the app
Launch the storybook server

Expected behavior
Should not throw error

Screenshots

System:

Environment Info:

  System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 10.16.3 - /var/folders/xx/4pg__j5s58585b86mzz27z540000gn/T/fnm-shell-1707442/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.9.0 - /var/folders/xx/4pg__j5s58585b86mzz27z540000gn/T/fnm-shell-1707442/bin/npm
  Browsers:
    Chrome: 79.0.3945.88
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: 5.3.0-beta.25 => 5.3.0-beta.25
    @storybook/addon-links: 5.3.0-beta.25 => 5.3.0-beta.25
    @storybook/addons: 5.3.0-beta.25 => 5.3.0-beta.25
    @storybook/react-native: 5.3.0-beta.25 => 5.3.0-beta.25
    @storybook/react-native-server: 5.3.0-beta.25 => 5.3.0-beta.25

Additional context
It still works after downgrade to beta.25 and it stops working after beta.26 and up.

The text was updated successfully, but these errors were encountered:

doctyper · 2020-01-04T15:37:05Z

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;

shilman · 2020-01-05T05:03:29Z

cc @Hypnosphi can we patch this if it makes sense?

Hypnosphi · 2020-01-05T10:08:53Z

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

doctyper · 2020-01-06T16:12:20Z

I will of course defer to you, but I would suggest exposing a setter API as opposed to encouraging a direct mutation:

const [context, setContext] = useContext()

...

setContext({ foo: ‘bar’ })

This would support my workaround. But again, I will defer to your judgement.

rdias-dev · 2020-01-24T06:01:22Z

+1

mi5ha · 2020-01-25T18:50:03Z

If I am not mistaken, current version of Storybook is unusable until this is solved right?

Is there some older version of Storybook that doesnt have this bug?

zhigang1992 · 2020-01-26T03:14:25Z

Default configuration with sb stopped working after beta.25

@mi5ha

QuinnRhys89 · 2020-01-29T21:54:37Z

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

TGTGamer · 2020-01-31T00:34:54Z

+1 Same issue, real shame as this tool looks great. Guess while it's unfixed i'll either have to revert or continue without storybook for a bit

arlyon · 2020-01-31T05:00:48Z

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.

brotsky · 2020-01-31T20:36:27Z

@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!

@arlyon

Patch was suggested here: https://github.com/storybookjs/storybook/issues/9294#issuecomment-580582681 Credit: @arlyon

jenskuhrjorgensen · 2020-02-03T10:26:21Z

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):

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

simonepizzamiglio · 2020-02-04T16:57:34Z

Thx @doctyper - it works for me too!

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

Replace
hooks.currentContext = context;
with
hooks.currentContext = Object.assign({}, context, { hooks: null });
in the file
node_modules/@storybook/addons/dist/hooks.js

Run npx patch-package @storybook/addons

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?

davidnuvolar · 2020-02-04T17:01:17Z

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

Replace
hooks.currentContext = context;
with
hooks.currentContext = Object.assign({}, context, { hooks: null });
in the file
node_modules/@storybook/addons/dist/hooks.js

Run npx patch-package @storybook/addons

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.

jenskuhrjorgensen · 2020-02-05T08:23:21Z

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

brotsky · 2020-02-05T23:20:24Z

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

brian-perlego · 2020-02-11T11:40:01Z

Any update on this issue ?

Gongreg · 2020-02-11T11:42:16Z

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

ghost · 2020-02-12T16:41:08Z

This also happened to me with @storybook/[email protected] and the patch workaround works for now

Gongreg · 2020-02-15T18:16:58Z

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.

jonathanmachado · 2020-02-16T20:40:30Z

Sorry I need this fix please.

Thanks

jonathanmachado · 2020-02-19T01:27:28Z

@Gongreg please you can check this thanks

davidnuvolar · 2020-02-19T07:37:39Z

@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.

jonathanmachado · 2020-02-21T00:04:41Z

Thanks @davidnuvolar it's working with this fix, only one question this fix remove actions logger? because in my stories I don't see actions event loggs, Thanks again

brian-perlego · 2020-03-02T08:48:41Z

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

davidnuvolar · 2020-03-03T15:17:32Z

I confirm the fix is working in 5.3.14. Thank you @Gongreg !

Gongreg · 2020-03-06T09:10:09Z

Great! :)

brotsky referenced this issue in brotsky/storybook Jan 31, 2020

Patch for Issue 9294

d193de5

Patch was suggested here: https://github.com/storybookjs/storybook/issues/9294#issuecomment-580582681 Credit: @arlyon

shilman transferred this issue from storybookjs/storybook Feb 2, 2020

Gongreg added bug Something isn't working high priority labels Feb 5, 2020

graszka22 mentioned this issue Feb 10, 2020

PIL-269, PIL-270 Add storybook pillarwallet/pillarwallet#1675

Merged

Gongreg mentioned this issue Feb 15, 2020

Core: Use telejson for websockets channel storybookjs/storybook#9867

Merged

Gongreg added the has PR label Feb 15, 2020

Gongreg closed this as completed Mar 6, 2020

samwhale mentioned this issue Feb 5, 2021

Design System: Snackbar - add 'early dismiss' and update styling GoogleForCreators/web-stories-wp#6220

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React native fails with JSON.serialization issue #13

React native fails with JSON.serialization issue #13

zhigang1992 commented Jan 2, 2020

doctyper commented Jan 4, 2020 •

edited

Loading

shilman commented Jan 5, 2020

Hypnosphi commented Jan 5, 2020 •

edited

Loading

doctyper commented Jan 6, 2020

rdias-dev commented Jan 24, 2020

mi5ha commented Jan 25, 2020

zhigang1992 commented Jan 26, 2020

QuinnRhys89 commented Jan 29, 2020

TGTGamer commented Jan 31, 2020

arlyon commented Jan 31, 2020 •

edited

Loading

brotsky commented Jan 31, 2020

jenskuhrjorgensen commented Feb 3, 2020 •

edited

Loading

simonepizzamiglio commented Feb 4, 2020 •

edited

Loading

davidnuvolar commented Feb 4, 2020 •

edited

Loading

jenskuhrjorgensen commented Feb 5, 2020

brotsky commented Feb 5, 2020

brian-perlego commented Feb 11, 2020

Gongreg commented Feb 11, 2020

ghost commented Feb 12, 2020

Gongreg commented Feb 15, 2020

jonathanmachado commented Feb 16, 2020

jonathanmachado commented Feb 19, 2020

davidnuvolar commented Feb 19, 2020

jonathanmachado commented Feb 21, 2020

brian-perlego commented Mar 2, 2020

davidnuvolar commented Mar 3, 2020

Gongreg commented Mar 6, 2020

React native fails with JSON.serialization issue #13

React native fails with JSON.serialization issue #13

Comments

zhigang1992 commented Jan 2, 2020

doctyper commented Jan 4, 2020 • edited Loading

shilman commented Jan 5, 2020

Hypnosphi commented Jan 5, 2020 • edited Loading

doctyper commented Jan 6, 2020

rdias-dev commented Jan 24, 2020

mi5ha commented Jan 25, 2020

zhigang1992 commented Jan 26, 2020

QuinnRhys89 commented Jan 29, 2020

TGTGamer commented Jan 31, 2020

arlyon commented Jan 31, 2020 • edited Loading

brotsky commented Jan 31, 2020

jenskuhrjorgensen commented Feb 3, 2020 • edited Loading

simonepizzamiglio commented Feb 4, 2020 • edited Loading

davidnuvolar commented Feb 4, 2020 • edited Loading

jenskuhrjorgensen commented Feb 5, 2020

brotsky commented Feb 5, 2020

brian-perlego commented Feb 11, 2020

Gongreg commented Feb 11, 2020

ghost commented Feb 12, 2020

Gongreg commented Feb 15, 2020

jonathanmachado commented Feb 16, 2020

jonathanmachado commented Feb 19, 2020

davidnuvolar commented Feb 19, 2020

jonathanmachado commented Feb 21, 2020

brian-perlego commented Mar 2, 2020

davidnuvolar commented Mar 3, 2020

Gongreg commented Mar 6, 2020

doctyper commented Jan 4, 2020 •

edited

Loading

Hypnosphi commented Jan 5, 2020 •

edited

Loading

arlyon commented Jan 31, 2020 •

edited

Loading

jenskuhrjorgensen commented Feb 3, 2020 •

edited

Loading

simonepizzamiglio commented Feb 4, 2020 •

edited

Loading

davidnuvolar commented Feb 4, 2020 •

edited

Loading