Failed prop type: Invalid prop children supplied to ThemeProvider, expected a ReactNode.

[bartplay2499]

Steps to reproduce

1. I migrated my project from @mui 5.16.7 to 6.4.6. 1.1 Here are the dependencies:

"@emotion/react": "11.14.0",
"@emotion/styled": "11.14.0",
"@mui/material": "6.4.6",
"@mui/x-charts": "7.27.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"@types/react": "18.3.2",
"@types/react-dom": "18.3.0",
"typescript": "5.7.3",
"webpack": "5.98.0",
"webpack-cli": "6.0.1"

2. I fixed all build errors.
3. The project runs and works, but there are a lot of warnings in the console about children, even though they are passed correctly.Here’s the code example:

import { createTheme, ThemeProvider } from '@mui/material'
import { FC } from "react"
import { createRoot } from 'react-dom/client'

const theme = createTheme()

export const App: FC = () => {
    return (
        <ThemeProvider theme={theme}>
            <div>1</div>
        </ThemeProvider>
    )
} 
const root = createRoot(document.getElementById("app")!)
root.render(<App />)

Current behavior

A lot of warnings are shown in the console, even with a minimal application like this:

react-jsx-runtime.development.js:87 Warning: Failed prop type: Invalid prop `children` supplied to `ThemeProvider`, expected a ReactNode.
    at ThemeProvider (https://localhost:44343/dist/material.js:36743:5)
    at ThemeProviderNoVars (https://localhost:44343/dist/material.js:32089:10)
    at ThemeProvider (https://localhost:44343/dist/material.js:32043:3)
    at App

Expected behavior

There should be no warnings.

Context

No response

Your environment

No response

Search keywords: children, ReactNode, Invalid prop

[siriwatknp]

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

[bartplay2499]

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

[siriwatknp]

@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

[github-actions]

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.

[bartplay2499]

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/**'],
    },
});

[renedist225]

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]

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

[siriwatknp]

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?

[siriwatknp]

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

[Janpot]

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

@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

[peterszu]

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",

[siriwatknp]

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

[siriwatknp]

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.