Can you share the repo? I don't recall that the propTypes has been changed in v6.

Good afternoon, here is an example. The project is already built and located in the "public" folder. You can launch index.html.
I am also providing the source code. I am working on Windows 11.
https://github.com/bartplay2499/mui_warnings

@bartplay2499

As you can see from the desktop.js, the children is not a ReactNode due to production build:

const theme = (0,_mui_material__WEBPACK_IMPORTED_MODULE_2__["default"])();
const App = () => {
    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_3__["default"], { theme: theme, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: "1" }) }));
};
const root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_1__.createRoot)(document.getElementById("app"));
root.render((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(App, {}));

It's common to remove PropTypes from production build, please try to use https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@bartplay2499 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

The thing is, this is not a production build, it's a development build, and it shows a bunch of warnings during development. In version 5.x.x, this behavior did not occur. All other settings and libraries remained the same. Only MUI was updated.

package.json

"scripts": {
    "build_debug": "webpack --config webpack.config.development.js --progress"
}

webpack.config.development.js

const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');

module.exports = env => merge(common(env), {
    mode: 'development',
    watch: false,
    devtool: 'source-map',
    watchOptions: {
        ignored: ['src/declares/**', 'node_modules/**'],
    },
});

This is also happening to me on 5.16.14, i have the warning in pretty much all of the material ui components being used in the project.

This happens in development build.

@bartplay2499

As you can see from the desktop.js, the children is not a ReactNode due to production build:

const theme = (0,mui_material__WEBPACK_IMPORTED_MODULE_2_["default"])();
const App = () => {
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(mui_material__WEBPACK_IMPORTED_MODULE_3_["default"], { theme: theme, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: "1" }) }));
};
const root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_1__.createRoot)(document.getElementById("app"));
root.render((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(App, {}));
It's common to remove PropTypes from production build, please try to use https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types

Good afternoon, are there any updates on this issue?

This is also happening to me on 5.16.14, i have the warning in pretty much all of the material ui components being used in the project.

This happens in development build.

Can you share the repo?

It could be this PR that introduces the bug. cc @DiegoAndai @Janpot Do you think the PR is the root cause of this?

@bartplay2499 When I do the following in your project

import PropTypes from 'prop-types';

import * as React from 'react';
import { createRoot } from 'react-dom/client';

const Foo: React.ComponentType<{ children: any }> = ({ children }) => {
  return <div>{children}</div>;
};

Foo.propTypes = {
  children: PropTypes.node.isRequired,
};

export const App: React.FC = () => {
  return (
    <Foo>
      <div>2</div>
    </Foo>
  );
};
const root = createRoot(document.getElementById('app')!);

root.render(<App />);

it looks like it has the same problem. It doesn't look like it's related specifically to @mui/material but something with your specific setup. Not sure yet why though. Have you seen this before? I can't replicate this on e.g. vite

Perhaps you can strip it down even further, to remove all unnecessary dependencies and webpack configuration?

@bartplay2499 When I do the following in your project

import PropTypes from 'prop-types';

import * as React from 'react';
import { createRoot } from 'react-dom/client';

const Foo: React.ComponentType<{ children: any }> = ({ children }) => {
return

{children}

;
};

Foo.propTypes = {
children: PropTypes.node.isRequired,
};

export const App: React.FC = () => {
return (

2

);
};
const root = createRoot(document.getElementById('app')!);

root.render();
it looks like it has the same problem. It doesn't look like it's related specifically to @mui/material but something with your specific setup. Not sure yet why though. Have you seen this before? I can't replicate this on e.g. vite

Perhaps you can strip it down even further, to remove all unnecessary dependencies and webpack configuration?

Good afternoon, I tried to clean up the project by removing all dependencies and keeping only React, TypeScript, @mui, and Webpack. However, as soon as I try to use components from MUI, it still shows warnings.
Repository

I'm seein' the same warnings with the following mui packages installed:

"overrides": {
	"@mui/system": "^6.4.11",
	"@mui/utils": "^6.4.9"
},
"@mui/icons-material": "^6.4.11",
"@mui/material": "^6.4.11",
"@mui/utils": "^6.4.9",
"@mui/x-date-pickers": "^7.21.0",

@peterszu What React version are you using? Please provide a reproducible repository that we can take a look.

Found the root cause, it's from react-is.

TLDR;

Material UI v6 and v7 bump react-is to 19.0.0 which has a breaking change for REACT_ELEMENT_TYPE.

react-is v18: var REACT_ELEMENT_TYPE = Symbol.for('react.element');
react-is v19: var REACT_ELEMENT_TYPE = Symbol.for('react.transitional.element');

At runtime, a React node is {{ $$typeof: symbol('react.element'), … }} which does not match the react-is v19 causing the PropTypes to throw the error.

Details

The children prop has PropTypes.node that goes through this checker, then isNode and stops at isValidElement.

isValidElement comes from react-is (isElement) package which is different between 16.13.1 (requested by emotion) and 19 (requested by @mui/material).

react-is v16:

var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;

function isElement(object) {
  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
}

react-is v19:

var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), // 🚨 this is where issue occurs
exports.isElement = function (object) {
      return (
        "object" === typeof object &&
        null !== object &&
        object.$$typeof === REACT_ELEMENT_TYPE
      );
    };

The propValue of children is { $$typeof: Symbol(react.element), … }, so it will throw error for react-is v19 (@mui/material start using v19 in latest v6 and v7).

This error depends on the package manager because several versions of react-is are used. Here is from yarn why react-is:

=> Found "react-is@16.13.1"
info Has been hoisted to "react-is"
info Reasons this module exists
   - Hoisted from "prop-types#react-is"
   - Hoisted from "@emotion#react#hoist-non-react-statics#react-is"
info Disk size without dependencies: "36KB"
info Disk size with unique dependencies: "36KB"
info Disk size with transitive dependencies: "36KB"
info Number of shared dependencies: 0
=> Found "@mui/material#react-is@19.1.0"
info This module exists because "@mui#material" depends on it.
=> Found "@mui/utils#react-is@19.1.0"
info This module exists because "@mui#material#@mui#utils" depends on it.