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

Throws "Invalid hook call" error when used with styled-components #499

Closed shubham-web closed 3 years ago

shubham-web commented 3 years ago

Bug report 🐞

Version & Environment

Expected Behaviour

I want to use styled-components for custom elements and for others @geist-ui/react but it's giving issues while setting up.

According to guide on server render the _document.js and _app.js file has to be changed as shown. But when styled-components package is imported which also requires _document.js and _app.js files to be changed. The conflict happens.

Actual results (or Errors)

It's throwing an error saying "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: ..."

image

Here's my _document.js

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

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const sheet = new ServerStyleSheet();
        const originalRenderPage = ctx.renderPage;
        const styles = CssBaseline.flush();

        try {
            ctx.renderPage = () =>
                originalRenderPage({
                    enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
                });

            const initialProps = await Document.getInitialProps(ctx);
            return {
                ...initialProps,
                styles: (
                    <>
                        {initialProps.styles}
                        {styles}
                        {sheet.getStyleElement()}
                    </>
                ),
            };
        } finally {
            sheet.seal();
        }
    }
    render() {
        return (
            <Html lang="en">
                <Head>
                    <meta charSet="utf-8" />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default MyDocument;

and _app.js

import Head from "next/head";
import { createGlobalStyle, ThemeProvider } from "styled-components";
import Layout from "./../components/Layout";
import { GeistProvider, CssBaseline } from "@geist-ui/react";

export default function App({ Component, pageProps }) {
    return (
        <>
            <Head>
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            </Head>
            <GeistProvider>
                <CssBaseline />
                <GlobalStyle />
                <ThemeProvider theme={theme}>
                    <Layout>
                        <Component {...pageProps}  />
                    </Layout>
                </ThemeProvider>
            </GeistProvider>
        </>
    );
}

const GlobalStyle = createGlobalStyle`
    body{
        margin: 0;
    }
`

.babelrc

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}

Upon running npm ls react the version it shows for geist is not the latest, Not sure if it has any connection with this issue but sharing it here.

image

Deep-Codes commented 3 years ago

@shubham-web This works fine for me tho

Can you reproduce and send a link?

Slightly Different Approach : CodeSandbox

shubham-web commented 3 years ago

Namaste Deepankar (@Deep-Codes), Here you go - CodeSandBox I'm using the latest version of packages (including react).

Deep-Codes commented 3 years ago

Namaste Deepankar (@Deep-Codes), Here you go - CodeSandBox I'm using the latest version of packages (including react).

Screenshot 2021-04-01 at 11 05 59 AM Screenshot 2021-04-01 at 11 07 23 AM

Works on the CodeSandBox and Locally Too

🤔

shubham-web commented 3 years ago

Now it's working yeah. @geist-ui/react package is recently updated.

Now when I run npm ls react The version of react in geist's modules is the updated one - image

Maybe had has something to do with it.

Btw Thanks for your help.

flaming-codes commented 3 years ago

Just as a note, I'm facing the same issue when trying to start a new Next.js-project with geist-ui. I'm using Node 12.20.0. Should I open a new issue for it?

Bildschirmfoto 2021-04-09 um 23 32 53

Edit: downgraded React to 16.14.0 for now, which is the simplest solution at the moment.

Deep-Codes commented 3 years ago

@flaming-codes i had done this before here's a Code Sandbox Link try it out if it doesn't work open a new issue but do provide a Reproduction to it.

flaming-codes commented 3 years ago

Not reproducible in CodeSandbox and on another machine of mine. Therefore it seems to be problem with my local installation / project setup.

joshuanianji commented 3 years ago

I'm facing the same issue with node v15.12.0 when I'm starting a new Next.js project with geist-ui. @flaming-codes did you figure out any issues on your local installation that might have been the problem? I also just downgraded to React 16.14.0 for now.

flaming-codes commented 3 years ago

@joshuanianji What I've done:

1.tried to install geist-ui with Node 12.20.x and NPM 7.x, which didn't work (also tried to use npm-shrinkwrap and manually override the peer-dep, with no success)

  1. checked out my repo on another device with Node 10.x and NPM 6.x, install worked and I commited my changes
  2. checked out the repo on my first device, everything worked out nicely

Note that I used nvm on both machines and also tried the install with Node 10.x on my first device initially, but that didn't work. Hope this helps.

joshuanianji commented 3 years ago

Awesome, it worked for me. Thanks!

EricWong1994 commented 1 year ago

I have a question in my project with React 17.2 , Does geist-ui can't work in this environment?