'Material UI v5 reports cannot read properties of undefined (reading 'createContext')

I've been upgrading a very old package from MUI v3 to v5 (along with old webpacks, old reacts, etc). Now I have mui v5, with react 17 and webpack 5. I can build successfully, but when I try to load from browser, I get a weird error:

ThemeContext.js:8 
        
       Uncaught TypeError: Cannot read properties of undefined (reading 'createContext')
    at eval (ThemeContext.js:8:70)
    at Module../node_modules/@mui/private-theming/useTheme/ThemeContext.js (voyager.js:2:712748)
    at __webpack_require__ (voyager.js:2:2598075)
    at eval (ThemeProvider.js:11:80)
    at Module../node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js (voyager.js:2:707401)
    at __webpack_require__ (voyager.js:2:2598075)
    at eval (ThemeProvider.js:9:78)
    at Module../node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js (voyager.js:2:722739)
    at __webpack_require__ (voyager.js:2:2598075)
    at eval (Voyager.tsx:13:79)

ThemeContext.js

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);

const ThemeContext = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createContext(null);

if (true) {
  ThemeContext.displayName = 'ThemeContext';
}

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ThemeContext);

I can find a way to debug and solve this. My file imports react as

import * as React from 'react';
import * as PropTypes from 'prop-types';
import { theme } from './MUITheme';
import { ThemeProvider } from '@mui/material/styles';

Interestingly, when I use my webpack for development which build a running demo, I have no issue, but if I build my standalone js and import it in the browser, I get this error. It might be possible I missed something, but I am having no clue.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source