Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MuiPickersFadeTransitionGroupRoot: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. #11531

Closed
mtr1990 opened this issue Dec 29, 2023 · 11 comments
Labels
component: pickers This is the name of the generic UI component, not the React module! external dependency Blocked by external dependency, we can’t do anything about it React 19 support PRs required to support React 19

Comments

@mtr1990
Copy link

mtr1990 commented Dec 29, 2023

Steps to reproduce

https://codesandbox.io/p/devbox/zealous-hawking-rrzwvv

Warning: MuiPickersFadeTransitionGroupRoot: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

No response

Search keywords: [next.js][ssr][StaticDatePicker]

@mtr1990 mtr1990 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 29, 2023
@LukasTy LukasTy self-assigned this Dec 29, 2023
@zannager zannager added the component: pickers This is the name of the generic UI component, not the React module! label Dec 29, 2023
@LukasTy
Copy link
Member

LukasTy commented Dec 29, 2023

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.

@LukasTy LukasTy added external dependency Blocked by external dependency, we can’t do anything about it and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 29, 2023
@michaldudak
Copy link
Member

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

@LukasTy
Copy link
Member

LukasTy commented Jan 9, 2024

@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. 😉

@LukasTy LukasTy closed this as not planned Won't fix, can't repro, duplicate, stale Jan 9, 2024
@LukasTy LukasTy removed their assignment Jan 9, 2024
@hongz1
Copy link

hongz1 commented Jan 19, 2024

@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)

@LukasTy
Copy link
Member

LukasTy commented Jan 23, 2024

@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. 👍

@hongz1
Copy link

hongz1 commented Jan 24, 2024

test-app.zip

@LukasTy Here you go. I made new nextjs app with minimal dependencies. You will see those warning messages when you go to /test page.

@MernblockchainLover2019

Hi Guys?
I faced same issues with @hongz1.
I used Next.js/Typescript/MUI.
Could you help me?

@RaphyPoo
Copy link

RaphyPoo commented May 3, 2024

This is also happening to me on my nextjs 14.1.4 application, is there a fix or not yet?

@oliviertassinari
Copy link
Member

oliviertassinari commented May 4, 2024

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.

@LukasTy
Copy link
Member

LukasTy commented Sep 3, 2024

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) 😉

@oliviertassinari oliviertassinari added the React 19 support PRs required to support React 19 label Sep 3, 2024
@oliviertassinari
Copy link
Member

@LukasTy It feels like:

  1. We could have this issue open. The problem is still present.
  2. We could solve this with MuiPickersFadeTransitionGroupRoot: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. #11531 (comment) for the time being, leaving a "TODO remove once Avoid the deprecated usage of defaultProps reactjs/react-transition-group#898 fixed"
  3. We could ask Sebastian access to react-transition-group to carry this one forward for React 19 support.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: pickers This is the name of the generic UI component, not the React module! external dependency Blocked by external dependency, we can’t do anything about it React 19 support PRs required to support React 19
Projects
None yet
Development

No branches or pull requests

8 participants