Aloha,
I often get an error message when running a jest snapshot test where on sub component breaks. React itself writes the following warning, but keeps the thrown error message:
An error was thrown inside one of your components, but React doesn't know what it was. This is likely due to browser flakiness. React does its best to preserve the "Pause on exceptions" behavior of the DevTools, which requires
some DEV-mode only tricks. It's possible that these don't work in your browser. Try triggering the error in production mode, or switching to a modern browser. If you suspect that this is actually an issue with React, please file an issue.
That message is not really useful and I was wondering if there is a certain environment variable I could set that would cause react to just pass the thrown error on.
Related
I had this errors with do any thing application was running correct, close the application and open it and that what happened without change Name of application,
I tried to remove Node-modules and reinstall it close vs code and open it again
nothing happen
First Error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
second error:
Invariant Violation: "main" has not been registered. This can happen if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called.
Recently I updated react (0.62.2) and expo (37.0.12). Nearly everything works fine. Except upon every App reload and shortly after an error occured, an error screen pops up that displays
console.error: There was a problem sending log messages to your development environment TypeError:
symbolicatedStack.map is not a function. (In 'symbolicatedStack.map(removeProjectRoot)',
'symbolicatedStack.map' is undefined
covering the previously occured error.
since there is no symbolicatedStack written by myself, I suspect its an internal error, but I can't figure out what it is. Upon pressing "Dismiss" everything works fine again. (Till the next reload/error)
Expo / React version are compatible according to their offical websites.
I guess this is dues to version missmatch try running expo upgrade command. It should resolve your issue.
This problem is killing me, but I keep getting this error when I compile and run (I am using .NET Core 3.0 with react app):
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
The error points to my ../src/index.js file:
Here is the error displayed
Here is the code that is flagged with the invalid hook call error
I'm not sure what's going on, i spent the past 3 hours trying to fix it but I just can't get the homepage to show.
I understand the hooks error, but I don't understand why its getting called.
I have the matching versions of React and React DOM, 16.13.1
For my react components, I use classes.
I'm not sure how to check for different copies of react
I'm quite new to React so maybe i misunderstood or messed up somewhere, please help me here, thank you.
EDIT:
Check if redux is installed on the client. This error occurs when it isn't installed on client directory but server directory.
check package.json of client.
Maybe a crazy solution but in my case nothing was actually wrong with my code. I was going nuts trying to find the error. But what actually helped, was upgrading the version of Typescript installed in my project from 4.4 to 4.9. Don't see any evident connection but after the upgrade everything worked like a charm. :)
I've create an ErrorBoundry component which is wrapped around all child components of App. I've added a throw error function to one of the child components to test. When the component renders it seems the ErrorBoundry is catching the error but then the error appears after it. What am I doing wrong.
Here's my sandbox https://codesandbox.io/s/n0qjwjvrnm
I noticed this please take a look in the error overlay.
This error overlay is powered by react-error-overlay used in
create-react-app.
I tested in my app and it show the correct behavior because I'm not using create-react-app so this is the feature powered by it.
This is not a bug. Cheers.
I'm looking for a methodical approach to track down which component is causing the "Uncaught Invariant Violation" errors in an unfamiliar codebase. Specifically when running a karma test suite that does not output stack-traces.
The most luck I had was adding console.log(JSON.stringify(element))to the render functions e.g. ReactShallowRenderer.prototype.render, which works okay. Is there a better way to do this?
I used Exception breakpoints on chrome, turn on the checkmark. Then use the CallStack to trace back the component throwing the error.
https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#exceptions