javascript - 简单 react 错误 : Can't use @material-ui/picker library in Next. js

Question

我正在尝试使用 @material-ui/pickers Next.js 应用程序中的库。

我在 /pages 中添加了 _app.js 文件作为 indicated in the Next.js docs作为放置 Picker 提供者的地方:

import React from "react";
import PropTypes from "prop-types";
import { ThemeProvider } from "@material-ui/core/styles";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns"; // using version 1.x as described in the docs
import CssBaseline from "@material-ui/core/CssBaseline";
import theme from "../src/theme";

export default function MyApp(props) {
  const { Component, pageProps } = props;

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <div>Hello</div>
          <Component {...pageProps} />
        </MuiPickersUtilsProvider>
      </ThemeProvider>
    </React.Fragment>
  );
}

代码沙箱示例:
https://codesandbox.io/s/crimson-rgb-cqg5p?file=/pages/_app.js

由于某种原因，服务器不会使用此设置启动。在做一个 SPA react 应用程序(没有 Next.js)时，它工作正常。尽管添加 Next.js 会导致问题。感谢您的帮助。

Answer 1

您缺少对等依赖性。 @material-ui/pickers 文档可能会更好，但您同时需要 @date-io/date-fns@1.x 和 date-fns@ 2.x 依赖项(至少如果你要使用 date-fns)

尝试运行以下命令并重新启动您的开发服务器:

npm install date-fns@2.x