简单的反应错误：不能在 Next.js 中使用 @material-ui/picker 库

Posted 2023-03-06

【中文标题】简单的反应错误：不能在 Next.js 中使用 @material-ui/picker 库

【英文标题】：Simple React Error: Can't use @material-ui/picker library in Next.js

【发布时间】：2020-11-28 17:46:36

【问题描述】：

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

我在/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 反应应用程序（没有 Next.js）时，它工作正常。添加 Next.js 虽然会导致问题。任何帮助表示赞赏。

【问题讨论】：

我的看法，那个库，我的意思是@material-ui/pickers，使用一些浏览器主机api。

【参考方案1】：

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

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

npm install date-fns@2.x