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