1

所以，我基本上是将项目从：
Material-UI 0.19 转换为 MUI 5.
babel-core 6.25 到 @babel/core 7.16
React 16.3 到 React 17.0.2

安装所有必需的依赖项（请参阅下面的依赖项），调整源代码以使用新的 MUI5 组件后，我遇到以下错误：

TypeError: Object(...) is not a function

这是在导入行后引发的

import TextField from '@mui/material/TextField';

堆栈跟踪的某些部分：

  .../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 |

添加的依赖项 
"@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 预设 
"babel": {
  presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
},

Webpack 入口 
{
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    exclude: /node_modules/,
    loader: require.resolve('babel-loader'),
    options: {
        compact: true,
    },
      },
4

0 回答 0