500 Error can not use getInitialProps with getStaticProps after updated react 18, next 12 #31675

illlama · 2021-11-22T07:30:23Z

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

16.13.0

What browser are you using?

chrome

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

I updated react to version 0.0.0-experimental-149b420f6-20211119 (I heard it as a newest experimantal version, 18) due to use a suspense for my project. (I don't have a plan to use a server component).

So I followed all the steps React 18
And also I updated next to v12

But I couldn't get a beta version through npm install next@latest react@beta react-dom@beta so I tried like this way
npm install react@beta react-dom@beta --save --legacy-peer-deps

And I added a

module.exports = {
  experimental: {
    concurrentFeatures: true
  }
}

Eventually I encountered all this error in every page.
Error: You can not use getInitialProps with getStaticProps. To use SSG, please remove your getInitialProps / in main page,
Error: 'getInitialProps' in Document component is not supported with 'concurrentFeatures' enabled. in another pages.
I don't use any getInitialProps in my project.

Expected Behavior

I think there could be some error in downloading a react 18 I mentioned.

To Reproduce

The text was updated successfully, but these errors were encountered:

huozhi · 2021-11-22T11:53:55Z

From the linked repo to this issue, the document page is extending from the default Document which has getInitialProps as its static method. Can you remove it to see if it works for you?

illlama · 2021-11-22T13:20:26Z

@huozhi Thanks a lot! I checked a _document.tsx but missed to check Document.

Then what should I do? Do I have to changegetInitialProps to getStaticProps?

    static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps>;

huozhi · 2021-11-22T14:55:57Z

Can you just remove the extends Document or you make it a functional component returning the result from current render function?

illlama · 2021-11-23T05:27:51Z

@huozhi Thanks for your comment.
I tried every your suggestions.
So I turned this

import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <link rel="preload" href="/fonts/Montserrat/Montserrat-Regular.ttf" as="font" crossOrigin="" />
                    <meta charSet="utf-8"></meta>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

to

import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument {
    render() {
        return (
            <Html>
                <Head>
                    <link rel="preload" href="/fonts/Montserrat/Montserrat-Regular.ttf" as="font" crossOrigin="" />
                    <meta charSet="utf-8"></meta>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

and

import Document, { Html, Head, Main, NextScript } from 'next/document';

function MyDocument() {
    return (
        <Html>
            <Head>
                <link rel="preload" href="/fonts/Montserrat/Montserrat-Regular.ttf" as="font" crossOrigin="" />
                <meta charSet="utf-8"></meta>
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
}

export default MyDocument;

But these are didn't work to me.

huozhi · 2021-11-23T09:16:06Z

Could you provide more details about the error trace?
I tried to run the client part of your project but didn't fully make it since it requires some server change.

I converted the document page to functional component and upgrade to latest next canary with react 18 beta, runs into 500 with error from emotion as well.

err: TypeError: Cannot read property 'registered' of null

I wonder if it's the similar issue to #31678 since you're still using emotion as well. Currently emotion react adapter use some browser API like document while the browser bundled is consumed by the custom web runtime when concurrentFeatures is enabled.

Please check #31678 (comment) for details and we're still working on it for supporting it with node runtime.

lveillard · 2021-11-28T21:16:14Z

I have exactly the same issue:

I have this error: Error: getInitialProps in Document component is not supported with concurrentFeatures enabled.

And then all the pages are 404 :(

Versions:
React & react-dom => 18.0-0-beta
next 12.0.5-canary.10

huozhi · 2021-11-28T21:28:42Z

@lveillard Looks like you're playing with server components from the build output.

getInitialProps is not supported by design, check the next.js - react 18 doc here

lveillard · 2021-11-29T00:14:05Z

Thanks! I think im not using getInitialProps at all, but im more a Product Manager than a dev and im new to Nextjs so im sure im doing something wrong.

I will keep playing with it and give feedback if i find issues when i understand it :)

chentsulin · 2021-11-30T06:39:21Z

I can reproduce this error by using the official example:

npx create-next-app@latest -e custom-server-express custom-server

With the following settings:

next.config.js -

module.exports = {
  experimental: {
    concurrentFeatures: true,
  },
}

dependencies -

    "next": "12.0.5-canary.11",
    "react": "^18.0.0-beta-0cc724c77-20211125",
    "react-dom": "^18.0.0-beta-0cc724c77-20211125"

Then, execute npm run dev:

…#31954) ## Bug Fixes: #31675 Functional document without gIP should be enabled when streaming is enabled, even without rsc - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md`

huozhi · 2021-11-30T19:38:38Z

👍 Thanks for the reproduction.
Can you try next v12.0.5-canary.12 to see if it resolves your issue?

chentsulin · 2021-12-01T03:49:11Z

@huozhi It works. Thanks.

balazsorban44 · 2022-01-27T06:05:56Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

…vercel#31954) ## Bug Fixes: vercel#31675 Functional document without gIP should be enabled when streaming is enabled, even without rsc - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md`

illlama added the bug Issue was opened via the bug report template. label Nov 22, 2021

illlama mentioned this issue Nov 22, 2021

(중간)[FE] React Experimental 버전 적용 boostcampwm-2021/web14-salondesrefuses#216

Closed

1 task

huozhi added area: Concurrent Features please add a complete reproduction The issue lacks information for further investigation and removed please add a complete reproduction The issue lacks information for further investigation labels Nov 22, 2021

huozhi mentioned this issue Nov 30, 2021

Enable default functional document when concurrentFeatures is enabled #31954

Merged

3 tasks

kodiakhq bot closed this as completed in #31954 Nov 30, 2021

pmualaba mentioned this issue Jan 17, 2022

relay-nextjs incompatible with new Next.js concurrentMode support RevereCRE/relay-nextjs#42

Closed

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

500 Error can not use getInitialProps with getStaticProps after updated react 18, next 12 #31675

500 Error can not use getInitialProps with getStaticProps after updated react 18, next 12 #31675

illlama commented Nov 22, 2021 •

edited

huozhi commented Nov 22, 2021

illlama commented Nov 22, 2021

huozhi commented Nov 22, 2021

illlama commented Nov 23, 2021 •

edited

huozhi commented Nov 23, 2021

lveillard commented Nov 28, 2021 •

edited

huozhi commented Nov 28, 2021

lveillard commented Nov 29, 2021 •

edited

chentsulin commented Nov 30, 2021

huozhi commented Nov 30, 2021

chentsulin commented Dec 1, 2021

balazsorban44 commented Jan 27, 2022

500 Error can not use getInitialProps with getStaticProps after updated react 18, next 12 #31675

500 Error can not use getInitialProps with getStaticProps after updated react 18, next 12 #31675

Comments

illlama commented Nov 22, 2021 • edited

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

huozhi commented Nov 22, 2021

illlama commented Nov 22, 2021

huozhi commented Nov 22, 2021

illlama commented Nov 23, 2021 • edited

huozhi commented Nov 23, 2021

lveillard commented Nov 28, 2021 • edited

huozhi commented Nov 28, 2021

lveillard commented Nov 29, 2021 • edited

chentsulin commented Nov 30, 2021

huozhi commented Nov 30, 2021

chentsulin commented Dec 1, 2021

balazsorban44 commented Jan 27, 2022

illlama commented Nov 22, 2021 •

edited

illlama commented Nov 23, 2021 •

edited

lveillard commented Nov 28, 2021 •

edited

lveillard commented Nov 29, 2021 •

edited