Xstate: Getting TypeError: Converting circular structure to JSON, when doing JSON.stringify(currentState)

[bhatti-open]

Bug or feature request?

Bug

Description:

Getting TypeError: Converting circular structure to JSON,
when doing JSON.stringify(currentState)

(Bug) Expected result:

it should stringify without error

(Bug) Actual result:

serializedState = JSON.stringify(currentState); // Machine had nested machines, used invoke
^

TypeError: Converting circular structure to JSON
at JSON.stringify ()
at Object. (\xs_test\index.js:55:25)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3

(Bug) Potential fix:

Required! If you found a bug and can consistently reproduce it, please take a minute to think about what the potential fix might be.
Even if the fix is incorrect, this can help diagnose and find the solution to the issue as quickly as possible.

I also strongly encourage you to create a pull request if you are confident in the potential fix.

(Feature) Potential implementation:

Not sure
Required! If you would like to see a feature or enhancement make its way to xstate, please describe:

• What the API would look like
• If this is a breaking change
• If this is part of the existing SCXML specification

Link to reproduction or proof-of-concept:

You can use CodePen or Code Sandbox to create a reproduction/POC.

[davidkpiano]

Can you please create a CodeSandbox for this?

[bhatti-open]

Here is the link : https://codesandbox.io/s/k3rr3kwqo

[davidkpiano]

Workaround using strings:

const machine = Machine({
  // ...
  invoke: {
    src: 'someService',
    // ...
  }
}, {
  services: {
    someService: someMachine
  }
});

[bhatti-open]

your strings fix, resolved the circular JSON error,
but when I deserialize ( JSON.parse(..) ) , it does not work after that
https://codesandbox.io/s/xpjqpq61jz

[timoxley]

@bhatti-open I haven't been able to get serialising of nested machines to work properly either, however note that if you nest everything inside the one machine, it works:

https://codesandbox.io/s/o4oymqmk56

My current workaround for this is to encapsulate the nested machine's config as a "state generator" function which can be inserted in the "parent" machine's config. It's a nuisance though.

[davidkpiano]

The fix for this will go out soon.

[bhatti-open]

@timoxley , I used your workaround and it works for me. thank you
@davidkpiano , thanks for your inputs. waiting for the fix.

[deniaz]

hey @davidkpiano, thanks for doing all the work on this, working with XState is a charm ♥

Just as a note: unfortunately the release of this fix was a breaking change, in a minor release and broke our service invocation since we referenced service functions directly. Also, the documentation hasn't been updated yet, and still shows that functions can be used as a src. I think while this fix is important, the release might've been a bit too quick. If I find time, I'll look into creating a MR for an documentation update 😄

[davidkpiano]

Hey @deniaz, can you please share the code that is breaking? I'll try to mitigate the issue in a patch.

EDIT: Please try version 4.3.2 and see if your issue is fixed.

[dwirz]

Hey @davidkpiano, first thanks a lot for your great work - like @deniaz already stated working with XState is really a charm. I've looked into our problem and I suppose the problem occurred because of this change
https://github.com/davidkpiano/xstate/commit/0041c94f36d4ebff2e8f715eff8feb756d0ecb67#diff-a22679c0e1167fd703b79102f0b220adL531 since we initially used the possibility to directly call a function which returns a promise and this is not possible anymore.

[davidkpiano]

Thanks @dwirz! If you can post a reproduction (via CodeSandbox or otherwise) that'd be helpful - hopefully it's not a breaking change (all the previous tests still passed).

[dwirz]

Hey @davidkpiano i just played around a little in CodeSandbox and it seems in the newest version (4.3.3) the problem is fixed. 🎉 Thanks and sorry for the inconvenience. Keep up the great work! 🙂

[myarjunar]

Hi @davidkpiano , thanks for all the hardwork on this! However I'm still getting this error on 4.10.0, and I'm not using nested machines.

Here is the xstate definition that I used -> https://codesandbox.io/s/romantic-herschel-0mmkd. The error only occurs when the serialisation happens after state transition in line 139 and 147.

[davidkpiano]

@myarjunar Have you tried 4.11?

[myarjunar]

@davidkpiano is there a bugfix or changes regarding this issue on 4.11? I will try that anyway, thanks!

[davidkpiano]

Also, the CodeSandbox you linked is currently invalid @myarjunar. If you're still experiencing the same issue in 4.11, please open a new issue Thanks!