[react 19] checkPropTypes, ensure runtime warning continuity #43138
Open
Description
Steps to reproduce
Link to live example: https://codesandbox.io/s/frosty-snowflake-zjl49r?file=/src/Demo.js
Steps:
- Take the example in [core] Improve getReactElementRef() utils #43022 (comment) with React 19
<Slide direction="up" in={checked} mountOnEnter unmountOnExit>
<p>sample</p>
<p>sample</p>
</Slide>-
Toggle the switch
-
Check the errors
but nothing tells you how to fix it.
Current behavior
No information on what is wrong.
You could argue that TypeScript will let you know ahead of time, but what if you get the type wrong? At least, from this issue, we can collect upvotes from developers who faced the same challenge.
Expected behavior
A clear error message.
Context
- On the removal of the propTypes check in React 19: [React 19] prop-types removal alternative / console component trace facebook/react#28992.
- Cases of doing error messages not the right way: [core] Remove warning message in production mui-x#13911, [DataGrid] Reduce bundle size with error messages mui-x#12992. It's not a so simple problem to solve.
- The future of prop-types: https://www.notion.so/mui-org/RFC-Discontinue-use-of-prop-types-ea106ba181704688ad70b155919ce4e1
- Possible simple solution with a new helper:
diff --git a/packages/mui-material/src/Slide/Slide.js b/packages/mui-material/src/Slide/Slide.js
index d669e811d6..f316556579 100644
--- a/packages/mui-material/src/Slide/Slide.js
+++ b/packages/mui-material/src/Slide/Slide.js
@@ -1,6 +1,8 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
+import getDisplayName from '@mui/utils/getDisplayName';
+import checkPropTypes from 'prop-types/checkPropTypes';
import { Transition } from 'react-transition-group';
import chainPropTypes from '@mui/utils/chainPropTypes';
import HTMLElementType from '@mui/utils/HTMLElementType';
@@ -82,11 +84,20 @@ export function setTranslateValue(direction, node, containerProp) {
}
}
+function muiCheckPropTypes(Component, props) {
+ if (process.env.NODE_ENV === 'production') {
+ return;
+ }
+ if (React.version >= '19') {
+ return checkPropTypes(Component.propTypes, props, 'prop', getDisplayName(Component));
+ }
+}
+
/**
* The Slide transition is used by the [Drawer](/material-ui/react-drawer/) component.
* It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
*/
-const Slide = React.forwardRef(function Slide(props, ref) {
+const Slide = React.forwardRef(function SlideIn(props, ref) {
+ if (process.env.NODE_ENV !== 'production') {
+ muiCheckPropTypes(Slide, props);
+ }
+Your environment
"@emotion/react": "11.13.0",
"@emotion/styled": "11.13.0",
"@mui/material": "5.16.6",
"react": "19.0.0-rc.0",
"react-dom": "19.0.0-rc.0"