So, I am basically converting a project from:
Material-UI 0.19 to MUI 5.
babel-core 6.25 to @babel/core 7.16
React 16.3 to React 17.0.2
After installing all the required dependencies (see dependencies below), adjusting the source code to use the new MUI5 components, I am met with the error below:
TypeError: Object(...) is not a function
This is raised after importing the line
import TextField from '@mui/material/TextField';
Some portion of the stack trace:
.../node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js:287
284 | } : rulesheet(function (rule) {
285 | currentSheet.insert(rule);
286 | })];
> 287 | var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
288 |
289 | var stylis = function stylis(styles) {
290 | return serialize(compile(styles), serializer);
.../node_modules/@emotion/react/dist/emotion-element-99289b21.browser.esm.js:17
14 | // and we could have a special build just for that
15 | // but this is much easier and the native packages
16 | // might use a different theme context in the future anyway
> 17 | typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
18 | key: 'css'
19 | }) : null);
20 |
Dependencies added
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/preset-react": "^7.16.0",
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^5.0.0-beta.5",
"@material-ui/styles": "^5.0.0-beta.5",
"@mui/icons-material": "^5.0.5",
"@mui/material": "^5.0.4",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^7.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"terser-webpack-plugin-legacy": "^1.2.5",
Babel preset
"babel": {
presets": [
"@babel/preset-env",
"@babel/preset-react"
]
},
Webpack entry
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
options: {
compact: true,
},
},
