Lucid: Please trigger a setState() to activate Lucid devtool.

Describe the bug I am not sure what is meant by this error message. I do have React devtools installed and working just fine.

To Reproduce Hard to know, I suppose it’s some environment issue since no one else is reporting it.

The app is running React 16.7.0-alpha.2 in development mode. There is react-apollo 2.2.4.

I don’t use Redux, so if the setState is somehow related to that, it should be mentioned somewhere.

Expected behavior It should show the promised wow UI 😃

Screenshots

Desktop (please complete the following information):

OS: Windows 10 x64
Browser chrome
Version 71

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 21 (7 by maintainers)

Most upvoted comments

Hey everyone, I just merged a few changes. These new changes should be able to get rid of the circular JSON error while still keeping information about properties of a component. If you want the changes right away then you can manually add Lucid to your browser or wait for the changes to be push to the chrome store but it takes some time to get it reviewed. Please give it a try and let me know if anyone still gets this error. Thank you.

neyser95 on Mar 25, 2019

I am seeing the same page on our app which is React 16+ and is using graphql. But I have a different error.

Uncaught TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at setTimeout (reactTraverser.js:30)

tgreen7 on Jan 14, 2019

Hey guys, kudos for the plugin but unfortunately I can’t test it either.

I get the same setState screen and also the Circular issue. Usually this type of circular dependency is because of JSON.stringify you mentioned. Maybe one of the solutions here work for you

Circular reference snippet

Uncaught TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at setTimeout (reactTraverser.js:30)

I am using NextJS with React 16.7, Apollo Client and Graphql-yoga(which includes Apollo server) on backend

UPDATE: I followed your instructions and built the plugin myself, at least graphql requests work 😃

pitops on Jan 18, 2019

@FredyC Originally, we weren’t populating the view until we’d finished the first DOM traversal for react to display a tree, but we just tweaked it so GraphQL-only users can still see their network requests! It’ll take some time to update on the Chrome developer tool because of Chrome’s approval process, but you can clone it down and use it locally as per the “Build your own” instructions. Thanks for the input.

eternalee on Jan 15, 2019

@tnrich Hi, apart from the other issue mention which seems to be the circular structure to JSON. Your issue is one that we have not seen. Could you please provide what steps you may have taken to get this error? We want to make sure that we cover as many edge cases as we can. Thank you.

neyser95 on Jan 14, 2019

Hi all!

Trigger setState - We’re relying on Facebook React DevTool’s ReactGlobalHook function to re-traverse the DOM and it is usually invoked whenever setState is invoked/re-render happens at a React component level. We’

Converting circular structure to JSON This is a known issue on the top of our backlog! We’re still looking into solutions and welcome feedback. I think the bug is because we traverse the DOM to create a large nested object (representing that DOM) and then JSON.stringify that object to send it into our app’s react-D3-tree graph. There are references between dom parent-child and child-parent (i.e. a child points to its parent which has a list of its children), but JSON doesn’t support references, hence the console error.

eternalee on Jan 15, 2019