I am using React, and the material-ui library for my front-end UI, and on the latest component I implemented, I started getting crashes with an error stating:
TypeError: undefined is not an object (evaluating 'effect.next').
It always occurs in a material UI dialog component, I cannot point out anything different from other dialogs I have written in the same project, I also cannot find mentions of this error anywhere. It occurs after 3 or 4 actions on the page/component. Sadly I cannot reproduce the error.
Solved:
If you print so much in the console(errors), then react can desync with itself during the component lifecycle, and crash all of the mounted components. Just close inspect element and it works fine
Related
I am getting an error when animating routes switching using CssTransition, I can’t find anything useful on the Internet about this problem. Maybe someone here can give some advice. Thanks!
react : 18.2.0
react-router-dom: 6.4.0
react-transition-group": 4.4.5
The problem is only when switching to the case/:id route
and not regularly, also if you manually reload the page with an error, it will load without an error, all other routes work correctly, the switching animation works as it should. I have an assumption that this is due to the fact that the page does not have time to render, but I don’t know how to solve this problem, even if this is the case.
code
I found solution here, i changed my routing as in example
http://reactcommunity.org/react-transition-group/with-react-router
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.
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.
I am trying to use the material-ui React components in my app. I'm using webpack and installed material-ui with npm. I have already replaced text inputs in my forms with the material-ui text-field and it works great.
But.
Then I tried adding a button. Simple enough right? Suddenly, I get this error:
Invariant Violation: ReactClass: You're attempting to use a component class as a mixin. Instead, just use a regular object
I have tested and this error gets thrown even if I just load in an otherwise empty Javascript file with this line:
require('material-ui/lib/raised-button');
If I remove that line, everything works fine. It's weird because the text-field works, so I know my setup is correct. I suspect there is a Mixin being used inside the button code?
Has anyone experienced this? Information on this is sparse, any help is appreciated.