Comments (12)
@LukasTy I got two warnings today although "react/require-default-props" is off. any suggestions to hide these warnings?
Warning: MuiPickersFadeTransitionGroupRoot: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:61:74) at PickersFadeTransitionGroup (webpack-internal:///(ssr)/./node_modules/@mui/x-date-pickers/DateCalendar/PickersFadeTransitionGroup.js:45:83) at div at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:61:74) at div at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:61:74) at PickersCalendarHeader (webpack-internal:///(ssr)/./node_modules/@mui/x-date-pickers/PickersCalendarHeader/PickersCalendarHeader.js:154:97) at div at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:61:74) at DateCalendar (webpack-internal:///(ssr)/./node_modules/@mui/x-date-pickers/DateCalendar/DateCalendar.js:165:86)
Warning: MuiPickersSlideTransitionRoot: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:61:74) at PickersSlideTransition (webpack-internal:///(ssr)/./node_modules/@mui/x-date-pickers/DateCalendar/PickersSlideTransition.js:130:83) at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:61:74) at div at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:61:74) at DayCalendar (webpack-internal:///(ssr)/./node_modules/@mui/x-date-pickers/DateCalendar/DayCalendar.js:258:84) at div at Transition (webpack-internal:///(ssr)/./node_modules/react-transition-group/esm/Transition.js:130:34) at Fade (webpack-internal:///(ssr)/./node_modules/@mui/material/Fade/Fade.js:56:79)
from mui-x.
Hi Guys?
I faced same issues with @hongz1.
I used Next.js/Typescript/MUI.
Could you help me?
from mui-x.
As for why the error is reported on MuiPickersFadeTransitionGroupRoot, it's because of https://github.com/emotion-js/emotion/blob/73f688103c5307c90d7544508b6d935243e4299e/packages/styled/src/base.js#L183. We could yolo do:
const PickersSlideTransitionRoot = styled(TransitionGroup, {
+delete PickersSlideTransitionRoot.defaultProps;
to silence the error, but the one on TransitionGroup will stay π. So we truly want reactjs/react-transition-group#898.
I'm recording this in: emotion-js/emotion#3184. It will make sense to kill this line at one point.
from mui-x.
Maybe only consider removing this rule:
https://github.com/mui/material-ui/blob/bf891feebee5473be8ee2795878950f186dd75d7/.eslintrc.js#L160
It was added 3 years ago and seems like it should not be turned off nowadays when such a thing is already deprecated. π
WDYT @mui/code-infra?
This rule is disabled, so the deprecated defaultProps
are not required. If we remove it, we'll get many errors such as propType "theme" is not required, but has no corresponding defaultProps declaration
from mui-x.
This is also happening to me on my nextjs 14.1.4 application, is there a fix or not yet?
from mui-x.
@LukasTy It feels like:
- We could have this issue open. The problem is still present.
- We could solve this with #11531 (comment) for the time being, leaving a "TODO remove once reactjs/react-transition-group#898 fixed"
- We could ask Sebastian access to react-transition-group to carry this one forward for React 19 support.
from mui-x.
Thank you for reporting this problem. π
It seems to be coming from https://github.com/reactjs/react-transition-group/blob/2989b5b87b4b4d1001f21c8efa503049ffb4fe8d/src/TransitionGroup.js#L169 and the fact that we are wrapping this component with styled
.
The root cause still seems to be inside of the react-transition-group
.
I'm not sure if we can do anything about it as it is... π€·
Maybe only consider removing this rule:
https://github.com/mui/material-ui/blob/bf891feebee5473be8ee2795878950f186dd75d7/.eslintrc.js#L160
It was added 3 years ago and seems like it should not be turned off nowadays when such a thing is already deprecated. π
WDYT @mui/code-infra?
P.S. The same error is also thrown if a TransitionGroup
component is wrapped in a styled
call on the application side. Tested with the provided example locally.
I will create an issue in the react-transition-group
repository to handle the removal of defaultProps
.
from mui-x.
@mtr1990 We've decided to not do anything in this regard.
The react-transition-group
package is a direct dependency of the pickers
package, whenever they will support the new approach for defining the defaultProps
- we will inherit it by bumping the dependency version.
In the meantime, consider disabling the rule, just as we did: https://github.com/mui/material-ui/blob/bf891feebee5473be8ee2795878950f186dd75d7/.eslintrc.js#L160 because it's clear that this transition is not that important to the React team if they didn't go through with updating packages that they maintain. π
from mui-x.
@hongz1 Would you be able to provide a minimal reproduction example so that we could test this behavior? π€
A GitHub repo would be as helpful as a live example. π
from mui-x.
@LukasTy Here you go. I made new nextjs app with minimal dependencies. You will see those warning messages when you go to /test page.
from mui-x.
Is there any way to hide the warning or disable it for simple DateCalendar component usage? "react/require-default-props": "off" doesn't work for me.
from mui-x.
Is there any way to hide the warning or disable it for simple DateCalendar component usage? "react/require-default-props": "off" doesn't work for me.
You are probably referring to an ESLint rule?
The error is thrown by React runtime, which does not work together with your ESLint config in any way. π
I'm sorry, but there does not seem to be any quick way to fix the issue.
It has to be fixed upstream or we have to replace react-transition-group
(if React no longer maintains it and can't keep it in sync with React itself). π
As for the time beingβfeel free to experiment with this suggestion: recharts/recharts#3615 (comment) π
from mui-x.
Related Issues (20)
- [pickers] Make the `<input />` version of the fields opt-in
- [pickers] Rename `AdapterDateFns` into `AdapterDateFnsV2` and `AdapterDateFnsV3` into `AdapterDateFns`
- [pickers] TimePicker minTime prop not allowing to pick the minimum time HOT 5
- [license] Migration from Pro to Premium license HOT 4
- [license] Charts heatmap license problem HOT 3
- [data grid] Header Filters empty / no UI once isEmpty or isNotEmpty is selected HOT 3
- [data grid] `gridFilteredDescendantCountLookupSelector` is not sufficient to complete user story HOT 3
- [docs] Create a recipe of a masked-based field
- [fields] Support validation on custom fields HOT 1
- [pickers] Improve the DX of custom field with custom editing behaviors HOT 1
- [data grid] Pagination Seems to Relocate Table at Bottom Instead of Top... HOT 6
- [data grid] Console error when editing empty single select cell HOT 3
- [docs] Provide examples for each slot of the pickers
- [fields] Make `splitFieldInternalAndForwardedProps` public HOT 1
- [data grid] Tests broken in JSDOM with v7.16.0 HOT 18
- [pickers][DatePicker] Incorrect display of value in input field when Controlled component HOT 2
- [data grid] Can't group by nested value in fields HOT 8
- [data grid] Rows are flickering when selecting a row using the checkbox HOT 1
- [RFC] Issues with `slotProps` overrides HOT 3
- [data grid] Datagrid Seems to Scroll On It's own HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.