Material-Table : TypeError: Object(...) is not a function Module../node_modules/@material-ui/pickers/dist/material-ui-pickers.esm.js

Question

我正在尝试为我的 React 应用程序安装材料表，但是当我尝试示例代码 (https://github.com/mbrn/material-table) 时，我从模块的文件中收到一条错误消息。

我尝试更新material-ui，它是5.8.0版本。

文档中的代码：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import MaterialTable from "material-table";


class App extends Component {
  render() {
    return (
      <div style={{ maxWidth: "100%" }}>
        <MaterialTable
          columns={[
            { title: "Adı", field: "name" },
            { title: "Soyadı", field: "surname" },
            { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
            {
              title: "Doğum Yeri",
              field: "birthCity",
              lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
            }
          ]}
          data={[
            { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
          ]}
          title="Demo Title"
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("react-div"));

错误信息：

TypeError: Object(...) is not a function
Module../node_modules/@material-ui/pickers/dist/material-ui-pickers.esm.js

39859 |   return utils;
39860 | }
39861 | 
> 39862 | var useStyles =Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_5__["makeStyles"])(function (theme) {                                                                                39863 |   var textColor = theme.palette.type === 'light' ? theme.palette.primary.contrastText : theme.palette.getContrastText(theme.palette.background.default);
39864 |   return {                                                           
39865 |     toolbarTxt: {

Answer 1

这可能是因为您的material-table 版本与material-ui 版本不兼容。例如看看这个例子：https://codesandbox.io/s/material-ui-material-table-versioning-issue-oeqij

@material-ui/core 版本为 3.9.3 material-table 版本为 1.39.2

同样的错误发生：makeStyles is not a function

但是如果你将@material-ui/core 的版本升级到4.1.2. 版本（目前最新），错误就会消失。至少这对我有帮助。我还必须将material-ui-pickers 更新为@material-ui/pickers（新名称，最新版本以避免将旧的material-ui 作为依赖项）

Answer 2

以下应该有效：

const MaterialTable = require("material-table");