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.
Related
Good morning,
How could I turn this object into a usable component in React JS?
I try to use it but I get multiple errors.
Link: MathCalc - Expression calculator in JavaScript
I use ESLint and the code changes when trying to create the component. I fixed bugs, but I can't get it to work properly.
In a new project without ESLint I manage to use it with the ambiguous code.
I ended up using an expression-calculator npm package.
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
So I need to update react, react-dom in order to update nextjs version to 11. React docs says that the new jsx transform approach is backwards compatible, though I met such problem after updating to react 17.0.2. Any file using jsx fails to compile with Can't resolve 'react/jsx-dev-runtime', no matter if I leave the import React from 'react', or remove it as intended after updating to react ^17.
I tried updating #babel/preset-react, using latest #babel/plugin-transform-react-jsx, same problem. The only thing I've found in a similar question topic here is adding /** #jsxRuntime classic */ to the top of the file, which obviously doesnt solve the problem for the whole application (perhaps there might be a way to make such directive global but even then - I would like to be able to use the new and more optimised jsx compiling)
Haven't been able to google exactly my case and any existing suggestions for similar cases didn't help.
To summarise - I need to either make my app work without importing react itself (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) or at least to be able to use the old way of jsx compiling with this new react version.
Any thoughts?
I have a component (a form) which is based on office ui fabric. The form is working fine in my react application. However, since we need this at multiple places, we decided to make it an npm package.
I extracted the component and can implement it in my app. I can fill out textfields and save and it works properly. However, as soon as I open a dropdown or datepicker (basically a "Callout" from office ui fabric), I get the following error message:
"Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue."
and:
"react-dom.development.js:14227 The above error occurred in the component:
in LayerBase
in CustomizedLayer
in StyledCustomizedLayer
in Callout
in div
in NormalPeoplePicker
[...]
"
Since it is working when I implement it within my app directly, it must be something in the build process I think. Can anybody eloberate, what this error message means exactly?
I am using the same package versions in my component as on my app.
Can I provide any files that might help? I don't know if showing my webpack.config or package.json for my component help at all?
Okay, it was indeed a mistake in my build process. I bundled the node_modules with my component and therefore suddenly hat two react "instances". After installing webpack-node-externals and adding
externals: [nodeExternals()]
to my webpack.config it works now.
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.