Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Cannot find React #134

Open
anthony-bernardo opened this issue Apr 23, 2018 · 55 comments
Open

Cannot find React #134

anthony-bernardo opened this issue Apr 23, 2018 · 55 comments
Assignees
@davidcsally

Comments

@anthony-bernardo
Copy link

I got : 'Cannot find React', I tried to enter 'setState()' in console, but I got :

Uncaught ReferenceError: setState is not defined
at :1:1

Am I doing something wrong ?
@davidcsally
Copy link
Member

Hi @xero88, thanks for giving React Sight a try. Our general error message means that React-Sight wasn't able to inject it's rendering patch into the React code. Ideally, when the dev tools are opened, React Sight will find the root div that React renders to, and patch the render function. However, if React-Sight can't find the render function, it will 'wait' for a render event to fire, and then patch the code from there.

If you can trigger a re-render (eg props change, state change, route change, redux change) while React-Sight is opened, it should hopefully fix the problem. Unfortunately, you can't manually call the setState() function in the console - it's internal to the React library

@bttf
Copy link

bttf commented May 9, 2018

hello; i've tried triggering re-renders within my app and have done so several ways but react-sight is still unable to latch on. is there any method you'd recommend to help debugging this, or perhaps where to look to find out more information?

@AntonVoltchok
Copy link

This is an identical issue that React dev tools has, my solution to this when I get it is to change routes, maybe go to the main view of the app and refresh there, or just try to refresh the app on different views other than where you are currently. So after you find a route that worked and react dev tools or sight loads, then you can navigate to the original route where you had this problem and then you can view it without issues.

@ChristianDavis
Copy link

I can't get this library to find any react project, even basic CRA projects in 14, 15, 16. Is there a specific hook I'm missing that's not in the docs?

have react Dev Tools > install extension > run React app

@davidcsally
Copy link
Member

@ChristianDavis are you able to see your app in react-dev-tools? Does triggering a setState / re-render cause it to show up in either extensions? If you have a test repo that replicates this I can take a look at it

@ChristianDavis
Copy link

Yeah, If you download and run the example app, https://github.com/react-boilerplate/react-boilerplate, react dev tools works and react-sight stays on the Cannot find React message. I'm on latest Chrome, 66.0.3359.181

@mashhoodr
Copy link

mashhoodr commented Jun 19, 2018 •
edited

Im getting the same on my React 16.3 project. Chrome 67.0.33. React dev tools working fine.

@ChristianDavis
Copy link

@davidcsally btw, love the idea of the graph display. We use graphs as data structures in a number of projects, not always visualized. If you need help figuring out what's going on, let me know. I'm excited to try it out

@gtdeng
Copy link

gtdeng commented Jul 10, 2018

I'm getting the same issue with React 15.6.

@anthonyvialleton
Copy link

Same here using React 16.3.1

@givik
Copy link

givik commented Jul 25, 2018

Same issue on react 16.4.1.

screen shot 2018-07-25 at 4 52 20 pm

@mick-feller
Copy link

Same problem here, react dev tools works, React-Sight giving me cannot find react.

react 16.4.2 and latest chrome on mac

@acarl005
Copy link

acarl005 commented Sep 6, 2018

Same issue with react 16.4.2 and latest chrome on mac

@DiederikvandenB
Copy link

Yup, same here.

@mathieuroblin
Copy link

Exact same situation for me. React 16.4.2, React-dev-tools work, and also running on chrome

@biels
Copy link

biels commented Sep 30, 2018 •
edited

Exact same situation for me. React 16.5.2, React-dev-tools work, and also running on chrome

@najisawas
Copy link

same issue, using react 16.5.2, and a working react-dev-tools...

@biels
Copy link

biels commented Oct 6, 2018 via email

@wh1le
Copy link

wh1le commented Dec 1, 2018

the same issue, using react 16.6.3, react-dev-tools work

@lvtianyu
Copy link

lvtianyu commented Dec 7, 2018

the same issue，using react 16.6.3 React-Sight

@biels
Copy link

biels commented Dec 7, 2018 via email

@davidcsally
Copy link
Member

Hi all, unfortunately it looks like its no longer working in React ~16.6.3. We built this out using "experimental" unstable under hood APIs in React. I would like to refactor our custom virtual DOM parser to simply accept the data from React DevTools, since that would do the heavy lifting for us, but I am not sure when I will have time. Possibly around the holidays. Sorry for the broken extension in the mean time. If you'd like to take a stab, please knock yourself out!

@BarishSarac
Copy link

Any update @davidcsally?

@philohelp
Copy link

philohelp commented Feb 14, 2019 •
edited

It started to work when I navigated the app. Everything fine since then, thanks for the great project.

@eaverdeja
Copy link

eaverdeja commented Feb 19, 2019 •
edited

Here it doesn't work, even on navigation. I'm using react 16.8.1 and not one class component for handling state or effects, it's hooks all the way. I'm still very excited to see this working!!

@davidcsally
Copy link
Member

Hey everyone, sorry for stringing ya'll along. I don't really have the time to maintain this anymore. If anyone is interested in talking a look, feel free to @ me and we can figure out a way to collaborate. I'm happy to help anyone that would like to contribute.

@e0da
Copy link

e0da commented Feb 21, 2019

@davidcsally Thank you for all the work you've done so far. ❤️

@michaelcmelton
Copy link

@davidcsally Is this project no longer maintained?

@davidcsally
Copy link
Member

@michaelcmelton it's no longer maintained :(

@coryhouse
Copy link

coryhouse commented Aug 13, 2019 •
edited

Since this isn't maintained and doesn't work, I suggest marking the repo and extension as such to avoid wasting people's time setting it up.

@golestanirad
Copy link

is there any alternative tool? PLEASE

@michaelcmelton
Copy link

@davidcsally What would it take to get this put back online??

@michaelcmelton
Copy link

@davidcsally To clarify, I’m interesting in collaborating and helping contribute to get this extension back usable again.

@solancer
Copy link

same issue

@laurencefass
Copy link

same issue. subscribed.

@angarag
Copy link

angarag commented Nov 22, 2019

same issue. Chrome Version 78.0.3904.108, React v16

@alex-engelmann
Copy link

Would be nice if the project's readme explained that it doesn't work. 30 minutes of my life wasted. Using Chrome Version 78.0.3904.108 and React 16.10.1

@golestanirad
Copy link

Would be nice if the project's readme explained that it doesn't work. 30 minutes of my life wasted. Using Chrome Version 78.0.3904.108 and React 16.10.1

That project saved millions of minutes of developers' lifetime when it was working so I guess the way that you say 30 minutes of yours was wasted is a bit mean, though, I totally agree that they need to report it on the website as well.

@IanWalston
Copy link

this extension no longer works

@davidcsally
Copy link
Member

Stay tuned! I actually fixed it here #147

@davidcsally davidcsally mentioned this issue Feb 9, 2020
Closed
davidcsally added a commit that referenced this issue Feb 10, 2020
@davidcsally
Release version 1.1.0 🚀
fd0db2a 
React-Sight is back! This should make the extenstion *actually*
useable again! It's not perfect, and there are still bugs, but it
will actually do something.

Lots of big changes here:
  - Fix communication issues between background script, content script,
    and browser tab.
  - Fix communication issues with react-devtools extension.
  - Revamp build system. Why did we even set it up to transpile to es5
    in the first place?
  - Upgrade all dependencies.

This one is for everyone that commented "not working" in the following
threads:
  #134
  #145
@davidcsally davidcsally mentioned this issue Feb 10, 2020
Merged
davidcsally added a commit that referenced this issue Feb 10, 2020
@davidcsally
Release version 1.1.0 🚀
eb29b68 
React-Sight is back! This should make the extenstion *actually*
useable again! It's not perfect, and there are still bugs, but it
will actually do something. By updating the webpack configuration,
dependencies, and imports, we were able to shave the file size down
by 12% (40kb)!

Lots of big changes here:
  - Fix communication issues between background script, content script,
    and browser tab.
  - Fix communication issues with react-devtools extension.
  - Revamp build system. Why did we even set it up to transpile to es5
    in the first place?
  - React sight is now
  - Upgrade all dependencies.

This one is for everyone that commented "not working" in the following
threads:
  #134
  #145
@davidcsally
Copy link
Member

davidcsally commented Feb 10, 2020 •
edited

It's lit 🔥Still some bugs to work through, but it works again! Version 1.1.0 has been published to the Chrome webstore, so hopefully it will be released soon! In the meantime, I will make the documentation clear on how to build your own version of this from this repository. It's actually really easy!

See - #176

@davidcsally davidcsally self-assigned this Feb 10, 2020
@davidcsally
Copy link
Member

For anyone that wants to try this out now, I've update the instructions for building the extension locally! #177

@davidcsally
Copy link
Member

davidcsally commented Feb 10, 2020 •
edited

I’ve also ported the fixed version to Firefox, where the new version is now live! Available here: https://addons.mozilla.org/en-US/firefox/addon/react-sight/

@GuillaumeAmat GuillaumeAmat mentioned this issue Feb 11, 2020
Closed
@davidcsally
Copy link
Member

Released! https://chrome.google.com/webstore/detail/react-sight/aalppolilappfakpmdfdkpppdnhpgifn

@cksachdev
Copy link

@davidcsally I am still getting the same error. Tried navigating to different views as well, but no luck.
Version: 1.1.0
image

@akhilnukala
Copy link

@davidcsally getting the same "Cannot find React" error...tried different things...but to no avail

@biels
Copy link

biels commented Apr 2, 2020

There are things that never change 😄 Looks like Cannot find React is one of them

@davidcsally
Copy link
Member

davidcsally commented Apr 9, 2020 •
edited

Sorry I haven't been too responsive, I think the core problem here for so many people is that this doesn't work on many server side rendering setups, specifically things like gatsby or react-snap. I am pretty sure this works on all client rendered applications. I'm going to update the readme and in app error message to say something along the lines of :

"Note: server side rendering and pre-rendering may not work".

@davidcsally
Copy link
Member

davidcsally commented Apr 11, 2020 •
edited

OK so with this bay area quarantine I've actually started looking into this. The root cause is the janky cloning method I am using to send data from the window to the chrome extension: JSON.parse(JSON.stringify(ReactSightData)).

(see traverse16 in fiber-hook)

I am pretty sure the problem for everyone here is this: clone error: TypeError: Converting circular structure to JSON. So I will have to reimplement this clone method in a safer way.

I noticed that the emotion package causes this to fail - I imagine there's a bunch of other popular packages that throw this error too. Hopefully one fix will fix all of this!

@davidcsally
Copy link
Member

OK I am pretty sure I fixed this, there were two major bugs:

  1. Trying to read store() when it was undefined would throw an error
  2. Trying to convert circular references would throw an error

I fixed 1. by wrapping in a try/catch, and 2. by using the circular package to filter out circular references.

I've tested this on a few different websites that it wasn't working on previously, and it worked!

Expect a PR soon!

@davidcsally
Copy link
Member

Should be fixed here: #202

I'll post another update when its published on the chrome / FF stores

@davidcsally
Copy link
Member

New version up for firefox: https://addons.mozilla.org/en-US/firefox/addon/react-sight/

Chrome bundle has been uploaded but will probably take a few days to pass review

@dancomanlive
Copy link

dancomanlive commented Apr 12, 2020 •
edited

Glad to hear we got an update but it's unfortunately not working for me on Firefox :( Same error message "Connot find React". It also seems to be creating multiple instances:

Screen Shot 2020-04-12 at 12 45 08 PM

@prescottprue
Copy link

Still seeing the same too in Chrome and I'm not using any server side rendering. I'm also seeing the following in the console:

image

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

@davidcsally davidcsally

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests