material-ui-pickers示例:TypeError:Object(...)不是函数

时间:2019-05-10 15:15:59

标签: javascript reactjs material-ui material-ui-pickers

我正在尝试使用一个裸项目并按照此处介绍的安装和使用步骤来设置最基本的可能的UI选择器示例:https://material-ui-pickers.dev/

我收到以下错误:

TypeError: Object(...) is not a function
Module../node_modules/@material-ui/pickers/dist/material-ui-pickers.esm.js
node_modules/@material-ui/pickers/dist/material-ui-pickers.esm.js:25
  22 | import Tab from '@material-ui/core/Tab';
  23 | import Tabs from '@material-ui/core/Tabs';
  24 | import Paper from '@material-ui/core/Paper';
> 25 | var useStyles = makeStyles(function (theme) {
  26 |   var textColor = theme.palette.type === 'light' ? theme.palette.primary.contrastText : theme.palette.getContrastText(theme.palette.background.default);
  27 |   return {
  28 |     toolbarTxt: {

我遵循的步骤是:

create-react-app material-ui-pickers-demo
yarn add @material-ui/core
yarn add @material-ui/pickers
yarn add @date-io/date-fns
import React, { useState } from "react";
import DateFnsUtils from "@date-io/date-fns"; // choose your lib
import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker value={selectedDate} onChange={handleDateChange} />
      <TimePicker value={selectedDate} onChange={handleDateChange} />
      <DateTimePicker value={selectedDate} onChange={handleDateChange} />
    </MuiPickersUtilsProvider>
  );
}

export default App;
yarn start

纱线版本​​为1.16.0 节点版本为v12.1.0

编辑:我已经看到了这个问题,但没有回答我的Uncaught TypeError: Object(...) is not a function when importing @material-ui/pickers

1 个答案:

答案 0 :(得分:6)

原因是@material-ui/core的版本错误。 @material-ui/pickers目前仅适用于@material-ui/core@v4.0.0-beta.1。 @ material-ui / core beta 1和@ material-ui / pickers对于在项目中使用它们太原始了。 因此,要解决您的问题,您需要执行以下步骤:

删除node_modules目录并 运行yarn add @material-ui/core@v4.0.0-beta.1 最后运行@material-ui/pickers@3.0.0-beta.1 它应该可以解决该错误。