This page doesn’t appear to be using React. If this seems wrong, follow the troubleshooting instructions on Microsoft Edge - reactjs

I created the build of a MERN Stack application using the npm run build command, then I ran this built application on my default browser (Microsoft Edge) using the npm start command. I then installed the react devtools extension for Edge from Chrome. But when I enable react devtools on my react app, it does not activate and I get the message This page doesn’t appear to be using React.
If this seems wrong, follow the troubleshooting instructions. I don't understand why I get this error because my application is entirely designed in react on the frontend side. I don't know if it's because I got the wrong server start command .

You can try the following solution.
In Edge, right click on React devtools, go to Manage extensions, and select "Allow access to file URLs".
Also, it has been reported that a re-installation of react devtools and a restart of browser may help. By the way, react devtools is available in Microsoft Edge Add-ons, so you can just install it in Edge (since you said you installed it from Chrome).

Updating Chrome to last version worked for me.
Chrome version: 109.0.5414.119 (Official Build) (64-bit)
System version: Ubuntu 20.04.2 LTS

Related

MediaStreamTrackGenerator available in Chrome DevTools but not in react app

I want to use the experimental Insertable Stream for MediaStreamTrack API in my project, specifically, the MediaStreamTrackGenerator.
The compatibility chart says it's supported from Chrome 94, and I'm using Chrome 109 (on Windows) so I figured it would be okay.
However, when ran new MediaStreamTrackGenerator({kind: video}) in my local development version of my react app, I got the error:
'MediaStreamTrackGenerator' is not defined no-undef.
First thought this is a problem with my chrome version so I ran the same line in my devtools console, and it worked there.
Then I thought this is because my node, npm, or react version not supporting this feature, so I updated them all to the latest version and it didn't help.**
A weird detail is that this error only appears after I make changes in my code (and it hot-reloads) or that I open devtools for my react app.
Update: it seems like I just had to add windows. to it.

React app will not write to Storage API in Microsoft Edge – no errors

I cannot write to either localStorage or sessionStorage in Microsoft Edge from a React app created with create-react-app, but there are no errors. It just...doesn't write.
I created a skeleton app running on localhost that has two basic buttons. The first button uses an event handler to write to both localStorage and sessionStorage. The second button uses the useEffect hook.
Both methods work, but not in Edge.
Works on Safari Version 16.1 (18614.2.9.1.12)
Works on Chrome Version 110.0.5481.77 (Official Build) (x86_64)
Fails on Edge Version 110.0.1587.41 (Official build) (x86_64)
I'm running this locally on a Mac. Mac OS is 13.0.1 (22A400)
...I feel like I am going nuts. Am I going nuts?

Fresh Nextjs app generates runtime errors

I'm trying to do a fresh install of nextjs on Windows (see command line screenshot) using gitbash and latest nodejs lts version (16.14.2). When running npm run dev everything seems to be in order.
However, after browsing to http://localhost:3000, I receive this:
I looked at Fresh NextJS App throwing errors before any changes but the version in that issue is next 11.1.1 whereas current is 12.1.4. At this point I'm pretty much stuck. =\
Turns out it was an issue with Chrome extensions. I disabled all of them and no longer received the error. One by one I re-enabled all of them but never found the source. =\

Unable to use PushToTalkButton of Speechly in react app

I am working with Speechly API in my react application. In that, I imported PushToTalkButton and PushToTalkButtonContainer from #speechly/react-ui and I have also configured from Speechly Playground it's working fine in Playground. Then I click on the button(PushToTalkButton) in react application it is not capturing my voice and not using the microphone. I tried to find out the problem with ErrorPanel but nothing is showing.
Could you try upgrading to version 1.2.4 by issuing npm install #speechly/react-ui#latest
Earlier versions were inadvertently coupled with a certain version of react-client package and might cause a problem you described.

React-Devtools discontinued or just moved? (React Native debugging)

I started with React Native today and I downloaded react-devtools from npm repo to debug Components hiearchy of React Native Expo app. It works fine, but it crashing sometimes.
Thats why I tried to search for some new version or something and I found, that GitHub repo of this project no longer exists (https://github.com/facebook/react-devtools) and was moved to (https://github.com/facebook/react). I dont understand where I can now found this tool in main React repo? Or project is discontinued? Are there some equivalents? Am I using some Legacy version?
Even debugged in browser (http://localhost:19001/debugger-ui/) telling me to download this app from non-existing repo.
Are there some equivalents?
I have been using reactotron for the need of devtools. This tool has way more options than devtools and the guide to install can be found here
https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md

Resources