CODEWITHSUNDEEP
reactjsmaterial-ui
xaoc2nd
xaoc2nd

Reputation: 105

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

I'm trying to install material-table for my React application but when i'm trying the example code (https://github.com/mbrn/material-table) but I get an error message from a file of the module.

I tried to update material-ui it's on the 5.8.0 version.

code from the doc :

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"));

Error message :

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: {

Upvotes: 4

Views: 2236

Answers (2)

Aleksei Poliakov
Aleksei Poliakov

Reputation: 1332

This could happen because your version of material-table is incompatible with version of material-ui. For example take a look at this example: https://codesandbox.io/s/material-ui-material-table-versioning-issue-oeqij

@material-ui/core version is 3.9.3 material-table version is 1.39.2

The same error happens: makeStyles is not a function

But if you bump the version of @material-ui/core to version 4.1.2. (latest at the moment) the error goes away. At least this is what helped me. I also had to update material-ui-pickers to @material-ui/pickers (new name, latest version to avoid having old material-ui as a dependency)

Upvotes: 3

Sushilzzz
Sushilzzz

Reputation: 577

The following should work:

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

Upvotes: 1

Related Questions