Simple React Error: Can't use @material-ui/picker library in Next.js

Question

I'm trying to use the @material-ui/pickers library within a Next.js app.

I added the _app.js file inside /pages as indicated in the Next.js docs as a place to put the Picker provider:

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

Code Sandbox example:
https://codesandbox.io/s/crimson-rgb-cqg5p?file=/pages/_app.js

The server won't start up with this setup for some reason. When doing a SPA react app (without Next.js), it works fine. Adding Next.js though causes issues. Any help is appreciated.

Answer 1

You are missing a peer dependency. The @material-ui/pickers documentation could be better, but you need both @date-io/[email protected] and [email protected] dependencies (at least if you're going to use date-fns)

Try running the following and restarting your dev server:

npm install [email protected]