New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug(firebase): firebase error "TypeError: Converting circular structure to JSON" #230

Open
JosephShering opened this Issue Aug 10, 2017 · 17 comments

Comments

Projects
None yet
6 participants
@JosephShering

JosephShering commented Aug 10, 2017

For some reason auth.json has a circular structure in it, firebase version might need to be updated

/Users/joseph/Projects/local_life/node_modules/react-redux-firebase/node_modules/firebase/auth.js:40

Full stack

TypeError: Converting circular structure to JSON
    at Object.stringify (native)
    at module.exports (/Users/joseph/Projects/local_life/node_modules/htmlescape/htmlescape.js:24:15)
    at NextScript.render (/Users/joseph/Projects/local_life/node_modules/next/dist/server/document.js:300:79)
    at /Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:795:21
    at measureLifeCyclePerf (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:794:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:821:32)
    at ReactCompositeComponentWrapper.performInitialMount (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:361:30)
    at ReactCompositeComponentWrapper.mountComponent (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactCompositeComponent.js:257:21)
    at Object.mountComponent (/Users/joseph/Projects/local_life/node_modules/react-dom/lib/ReactReconciler.js:45:35)

/Users/joseph/Projects/local_life/node_modules/react-redux-firebase/node_modules/firebase/auth.js:40
h.send=function(a){if(a)if("string"==typeof a)this.ua.send(a);else throw Error("Only string data is supported");else this.ua.send()};h.abort=function(){this.ua.abort()};h.setRequestHeader=function(){};h.Re=function(){this.status=200;this.responseText=this.ua.responseText;Ic(this,4)};h.Sd=function(){this.status=500;this.responseText="";Ic(this,4)};h.Te=function(){this.Sd()};h.Se=function(){this.status=200;Ic(this,1)};var Ic=function(a,b){a.readyState=b;if(a.onreadystatechange)a.onreadystatechange()};var Jc=function(a,b,c){this.ef=c;this.Fe=a;this.wf=b;this.sc=0;this.lc=null};Jc.prototype.get=function(){var a;0<this.sc?(this.sc--,a=this.lc,this.lc=a.next,a.next=null):a=this.Fe();return a};Jc.prototype.put=function(a){this.wf(a);this.sc<this.ef&&(this.sc++,a.next=this.lc,this.lc=a)};var Kc=function(a){l.setTimeout(function(){throw a;},0)},Lc,Mc=function(){var a=l.MessageChannel;"undefined"===typeof a&&"undefine
Error: This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled.
error Command failed with exit code 1.
@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Aug 15, 2017

Owner

@JosephShering Have you tried using v2? It allows you to pass a Firebase instance meaning that you can manage the version yourself.

That said, it could have something to do with your setup. Are you using nextjs to try to do server side rendering? If so, have you set enableRedirectHandling: false? May be unrelated, but just a guess.

Owner

prescottprue commented Aug 15, 2017

@JosephShering Have you tried using v2? It allows you to pass a Firebase instance meaning that you can manage the version yourself.

That said, it could have something to do with your setup. Are you using nextjs to try to do server side rendering? If so, have you set enableRedirectHandling: false? May be unrelated, but just a guess.

@prescottprue prescottprue added this to the v1.6.0 milestone Aug 16, 2017

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Sep 2, 2017

Owner

@JosephShering Did you get a chance to try out v2 yet? Thinking this will no longer be an issue.

The v1 syntax will continued to be updated but since the Firebase version is linked to the library in v1 (again, not the case in v2), may take time for this to be solved for v1 users.

Owner

prescottprue commented Sep 2, 2017

@JosephShering Did you get a chance to try out v2 yet? Thinking this will no longer be an issue.

The v1 syntax will continued to be updated but since the Firebase version is linked to the library in v1 (again, not the case in v2), may take time for this to be solved for v1 users.

@prescottprue prescottprue changed the title from TypeError: Converting circular structure to JSON to bug(firebase): firebase error "TypeError: Converting circular structure to JSON" Sep 2, 2017

@artisin

This comment has been minimized.

Show comment
Hide comment
@artisin

artisin Sep 15, 2017

I ran into the same exact error while using this fantastic library with Next.js and the next-redux-wrapper library. To make a long story short, this problem originate in the next-redux-wrapper and it simply will not work with v1.X or v2.X. However, all is not lost because the good news is you can easily create your own withRedux HOC and the template for doing so is laid out here.

artisin commented Sep 15, 2017

I ran into the same exact error while using this fantastic library with Next.js and the next-redux-wrapper library. To make a long story short, this problem originate in the next-redux-wrapper and it simply will not work with v1.X or v2.X. However, all is not lost because the good news is you can easily create your own withRedux HOC and the template for doing so is laid out here.

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Sep 15, 2017

Owner

@artisin Thanks for mentioning that, I will look into trying to work that into the docs and/or an example.

Owner

prescottprue commented Sep 15, 2017

@artisin Thanks for mentioning that, I will look into trying to work that into the docs and/or an example.

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Feb 19, 2018

Owner

v1.*.* version have not been receiving much attention these days since 2.*.* has been in production for a while now. Going to close this for inactivity.

Open to PRs if there are still folks using v1.*.* versions.

Owner

prescottprue commented Feb 19, 2018

v1.*.* version have not been receiving much attention these days since 2.*.* has been in production for a while now. Going to close this for inactivity.

Open to PRs if there are still folks using v1.*.* versions.

@cmcewen

This comment has been minimized.

Show comment
Hide comment
@cmcewen

cmcewen Mar 19, 2018

@artisin running into the same problem as you with next.js - how did you end up solving it?

cmcewen commented Mar 19, 2018

@artisin running into the same problem as you with next.js - how did you end up solving it?

@walleXD

This comment has been minimized.

Show comment
Hide comment
@walleXD

walleXD Mar 21, 2018

@artisin I tried to use the custom redux setting but the results are the same. The error still remains.

@prescottprue the issue seems to be associated with the firebase created by nextjs on the server side. Any ideas how to get things working nextjs with our running into the TypeError: Converting circular structure to JSON issue? Also, I am on v2 too

walleXD commented Mar 21, 2018

@artisin I tried to use the custom redux setting but the results are the same. The error still remains.

@prescottprue the issue seems to be associated with the firebase created by nextjs on the server side. Any ideas how to get things working nextjs with our running into the TypeError: Converting circular structure to JSON issue? Also, I am on v2 too

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Mar 22, 2018

Owner

Not sure, what versions of firebase is everyone using? If someone has a nextjs example that I could run to try to replicate, then I can look into it.

Going to reopen the issue for now. Though the original issue wasn't necessarily associated with SSR, it is similar enough.

Owner

prescottprue commented Mar 22, 2018

Not sure, what versions of firebase is everyone using? If someone has a nextjs example that I could run to try to replicate, then I can look into it.

Going to reopen the issue for now. Though the original issue wasn't necessarily associated with SSR, it is similar enough.

@prescottprue prescottprue reopened this Mar 22, 2018

@walleXD

This comment has been minimized.

Show comment
Hide comment
@walleXD

walleXD Mar 22, 2018

@prescottprue Here's the repo I am working on.

The project is created using learn but once you cd into the apps/web folder and can run any of the yarn commands. I hope the repo helps to pin down why the SSR breaks. Both the next-redux-wrapper and custom redux setup lead to the same issue

walleXD commented Mar 22, 2018

@prescottprue Here's the repo I am working on.

The project is created using learn but once you cd into the apps/web folder and can run any of the yarn commands. I hope the repo helps to pin down why the SSR breaks. Both the next-redux-wrapper and custom redux setup lead to the same issue

@walleXD

This comment has been minimized.

Show comment
Hide comment
@walleXD

walleXD Mar 29, 2018

@prescottprue The error seems to happen after the @@reactReduxFirebase/AUTH_EMPTY_CHANGE action is fired. Were you able to figure our why it's happening with nextjs?

walleXD commented Mar 29, 2018

@prescottprue The error seems to happen after the @@reactReduxFirebase/AUTH_EMPTY_CHANGE action is fired. Were you able to figure our why it's happening with nextjs?

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Mar 30, 2018

Owner

@walleXD I was able to repro with your repo late last night, but didn't get to debugging. Going to look into it further tonight and tomorrow.

Thanks for posting the repo.

Owner

prescottprue commented Mar 30, 2018

@walleXD I was able to repro with your repo late last night, but didn't get to debugging. Going to look into it further tonight and tomorrow.

Thanks for posting the repo.

@artisin

This comment has been minimized.

Show comment
Hide comment
@artisin

artisin Apr 10, 2018

Hey @cmcewen and @walleXD → So it's been a bit since I wrote this and I'm not exactly sure how I solved the issue but there's a good chance this gist will provide you with the light you need. If not drop me a line and I'll look further down the line but this should do the trick. In the attached gist I have the redux-wrapper HOC I created (that I think solved the issue and you're free to use) as well as an example /page root dir component that uses the said redux-wrapper HOC.

https://gist.github.com/artisin/d56750d955ff4a60ed11e6a714cbd1bd

artisin commented Apr 10, 2018

Hey @cmcewen and @walleXD → So it's been a bit since I wrote this and I'm not exactly sure how I solved the issue but there's a good chance this gist will provide you with the light you need. If not drop me a line and I'll look further down the line but this should do the trick. In the attached gist I have the redux-wrapper HOC I created (that I think solved the issue and you're free to use) as well as an example /page root dir component that uses the said redux-wrapper HOC.

https://gist.github.com/artisin/d56750d955ff4a60ed11e6a714cbd1bd

@walleXD

This comment has been minimized.

Show comment
Hide comment
@walleXD

walleXD Jun 4, 2018

@artisin Thank you very much 🙏🏼

Do you know why the next-redux-wrapper doesn't work with react-redux-firebase? In a next-redux-wrapper issue, the author mentions it's about data serialization, is that the case?

walleXD commented Jun 4, 2018

@artisin Thank you very much 🙏🏼

Do you know why the next-redux-wrapper doesn't work with react-redux-firebase? In a next-redux-wrapper issue, the author mentions it's about data serialization, is that the case?

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Jun 4, 2018

Owner

@artisin It would be awesome to point to the fix you posted in your gist in the documents somehow. At the very least, it would be good to mention the withRedux HOC from redux-wrapper.

Owner

prescottprue commented Jun 4, 2018

@artisin It would be awesome to point to the fix you posted in your gist in the documents somehow. At the very least, it would be good to mention the withRedux HOC from redux-wrapper.

@tky5622

This comment has been minimized.

Show comment
Hide comment
@tky5622

tky5622 Aug 4, 2018

@walleXD the reason why @artisin's example works but next-redux-wrapper doesn't is that next-redux-wrapper passes state from server to client(maybe getInitialProps method) and Next.js yields "Converting circular structure to JSON" error when server sends unserialized javascript object to client. The Example does't do it, so he succeeded in using react-redux-firebase.

tky5622 commented Aug 4, 2018

@walleXD the reason why @artisin's example works but next-redux-wrapper doesn't is that next-redux-wrapper passes state from server to client(maybe getInitialProps method) and Next.js yields "Converting circular structure to JSON" error when server sends unserialized javascript object to client. The Example does't do it, so he succeeded in using react-redux-firebase.

@tky5622

This comment has been minimized.

Show comment
Hide comment
@tky5622

tky5622 Aug 4, 2018

I don't try but by serializing state with this ( to avoid Converting circular structure to JSON error),
we can use react-redux-firebase with next-redux-wrapper
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value

tky5622 commented Aug 4, 2018

I don't try but by serializing state with this ( to avoid Converting circular structure to JSON error),
we can use react-redux-firebase with next-redux-wrapper
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value

@prescottprue

This comment has been minimized.

Show comment
Hide comment
@prescottprue

prescottprue Aug 4, 2018

Owner

@tky5622 Really interesting, thanks for posting. Would love to looking into making a PR for that

Owner

prescottprue commented Aug 4, 2018

@tky5622 Really interesting, thanks for posting. Would love to looking into making a PR for that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment