search

geist-org / geist-ui

A design system for building modern websites and applications.
https://geist-ui.dev
MIT License
4.33k stars 334 forks source link

Invalid hook call with Next.js 11 #568

Closed maxphillipsdev closed 3 years ago

maxphillipsdev commented 3 years ago

Bug report 🐞

Version & Environment

Expected Behaviour

The behavior I expect is I should be able to launch next.js dev mode with next dev without getting an invalid hook call error when it compiles the page.

Actual results (or Errors)

I get an invalid hook call error on page compilation from the GeistProvider and CSSBaseline higher order components.

I got an error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/home/max/dev/dagcord/frontend/node_modules/@geist-ui/react/node_modules/react/cjs/react.development.js:1465:13)
    at useState (/home/max/dev/dagcord/frontend/node_modules/@geist-ui/react/node_modules/react/cjs/react.development.js:1496:20)
    at useCurrentState (/home/max/dev/dagcord/frontend/node_modules/@geist-ui/react/dist/index.js:962:73)
    at GeistProvider (/home/max/dev/dagcord/frontend/node_modules/@geist-ui/react/dist/index.js:781:98)
    at processChild (/home/max/dev/dagcord/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/home/max/dev/dagcord/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/home/max/dev/dagcord/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/home/max/dev/dagcord/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/home/max/dev/dagcord/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/home/max/dev/dagcord/frontend/node_modules/next/dist/next-server/server/render.js:53:854)

Files

_app.tsx:


import type { AppProps } from "next/app";
import { GeistProvider, CssBaseline } from "@geist-ui/react";

const App = ({ Component, pageProps }: AppProps) => {
  return (
      <GeistProvider>
        <CssBaseline />
        <Component {...pageProps} />
      </GeistProvider>
  );
};
export default App;

_document.tsx (copied from the geist-ui example for next.

import Document, { Html, Head, Main, NextScript } from "next/document";
import { CssBaseline } from "@geist-ui/react";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    const styles = CssBaseline.flush();

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          {styles}
        </>
      ),
    };
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
unix commented 3 years ago

The canary version solves this issue. If you do not want to include breaking upgrades, use the 2.2.0-canary.6, the latest canary version is 2.2.0-canary.7.