getStaticProps returns empty object at prod and dev (next v9.5.1) #15993

omar-dulaimi · 2020-08-08T07:16:12Z

omar-dulaimi
Aug 8, 2020

Bug report

Describe the bug

getStaticProps returns empty object at both dev and prod

To Reproduce

import Header from './header';
import Head from './head';
import Footer from './footer';
import { useEffect } from 'react';
import Utils from '../util/utils';
import { hostName } from '../config/variables';

function Privacy({ pageTitle, metaTitle, description, metaDescription, url }) {
    console.log("Privacy -> pageTitle", pageTitle)
    useEffect(() => {
        Utils.handleFBPixelPageView('Privacy');
    }, []);

    return (
        <div>
            <Head
                isAmpPage={false}
                pageTitle={pageTitle}
                description={description}
                url={url}
                metaTitle={metaTitle}
                metaDescription={metaDescription}
            />
            <Header isAmp={false} />
            <div className="privacy-main-panel">

            Hello there!
            </div>

            <style jsx global>{`
                .privacy-main-panel {
                    width: 1000px;
                    display: flex;
                    flex-direction: column;
                    text-align: right;
                    font-family: inherit;
                    padding-top: 20px;
                    margin: 0 auto;
                }
                h1 {
                    padding: 0;
                    margin: 5px 0;
                    line-height: 1;
                    margin-bottom: 25px;
                }
                h2,
                h3 {
                    padding: 0;
                    margin: 5px 0;
                    line-height: 1;
                }
                p {
                    margin-bottom: 10px;
                }
                ul {
                    margin: 0;
                    margin-bottom: 20px;
                }
                @media only screen and (max-width: 1000px) {
                    .privacy-main-panel {
                        width: 100vw;
                        padding: 20px;
                    }
                }
            `}</style>
            <Footer isVisibleOnMobile={true} />
        </div>
    );
}

export async function getStaticProps() {
    return {
        props: {
            pageTitle: 'text1',
            metaTitle: 'text2',
            description: 'text3',
            metaDescription: 'text4',
            url: `${hostName}/privacy`,
        },
    };
}

export default Privacy;

Expected behavior

Returned props should get passed to the component

System information

OS: Ubuntu 18.04
Browser: Chrome Version 84.0.4147.105 (Official Build) (64-bit)
Version of Next.js: 9.5.1
Version of Node.js: 12.18.3

Additional context

I dug through next-server.js and logged the related values:

}renderToHTML -> pathname /privacy
result {
  components: {
    App: [Function: WrappedApp] {
      displayName: 'withRedux(f)',
      getInitialProps: [Function]
    },
    Document: [class MyDocument extends Document],
    Component: [Function: Privacy],
    buildManifest: {
      polyfillFiles: [Array],
      devFiles: [Array],
      ampDevFiles: [Array],
      lowPriorityFiles: [Array],
      pages: [Object],
      ampFirstPages: []
    },
    reactLoadableManifest: { './dev/noop': [Array] },
    pageConfig: {},
    getServerSideProps: undefined,
    getStaticProps: [AsyncFunction: getStaticProps],
    getStaticPaths: undefined
  },
  query: { _nextDataReq: undefined, amp: undefined }
}
this.renderOpts {
  poweredByHeader: true,
  canonicalBase: '',
  buildId: 'development',
  generateEtags: true,
  previewProps: {
    previewModeId: 'k',
    previewModeSigningKey: 'k',
    previewModeEncryptionKey: 'k'
  },
  customServer: true,
  ampOptimizerConfig: undefined,
  basePath: '',
  optimizeFonts: false,
  fontManifest: null,
  assetPrefix: '',
  dev: true,
  ErrorDebug: [Function: ReactDevOverlay],
  ampSkipValidation: false,
  ampValidator: [Function]
}
components.getStaticProps:  Promise {
  {
    props: {
      pageTitle: 'text1',
      metaTitle: 'text2',
      description: 'text3',
      metaDescription: 'text4',
      url: 'http://localhost:3000/privacy'
    }
  }
}
query:  [Object: null prototype] {}
params:  null
all:  { _nextDataReq: undefined, amp: undefined }
Privacy -> pageTitle undefined

SO link: https://stackoverflow.com/questions/63312375/getstaticprops-returns-empty-object-at-prod-and-dev-next-v9-5-1

Answered by omar-dulaimi

Aug 11, 2020

@desaijay315 The issue is related to next-redux-wrapper library. It introduced new changes after Nextjs's latest features, their way of handling getStaticProps has changed, and since I only upgraded NextJs this issue occurred.

The docs should mention this, and next-redux-wrapper should display a warning.

Anyways, thanks for your time!

View full answer

desaijay315 · 2020-08-08T13:22:54Z

desaijay315
Aug 8, 2020

Can you please check if the pageProps is passed correctly to the custom component

export default ({ Component, pageProps }) => (
<Component {...pageProps} />
)

0 replies

omar-dulaimi · 2020-08-08T14:31:29Z

omar-dulaimi
Aug 8, 2020
Author

Hey @desaijay315
If by custom component you meant the _app, then yeah it's correctly passed:

        const { Component, pageProps, store } = this.props;
        return (
            <Provider store={store}>
                <Component {...pageProps} />
                <MobileBarController />
            </Provider>
        );

2 replies

desaijay315 Aug 8, 2020

Can you share the GitHub repo -----

omar-dulaimi Aug 8, 2020
Author

Unfortunately I'm not allowed to do that

omar-dulaimi · 2020-08-08T15:27:59Z

omar-dulaimi
Aug 8, 2020
Author

Why did this issue get converted to a discussion?
The original discussion received no attention since yesterday and its clearly a real issue and not just a typo or something!

1 reply

omar-dulaimi Aug 8, 2020
Author

Hope the ones that made the decision help with an answer soon instead of keeping it unsolved like this

omar-dulaimi · 2020-08-09T06:21:08Z

omar-dulaimi
Aug 9, 2020
Author

The problem seems to be here:

      static async getInitialProps({ Component, ctx }) {
        const pageProps = Component.getInitialProps
            ? await Component.getInitialProps(ctx)
            : {};
        return { pageProps };
    }

Component.getInitialProps is undefined so pageProps returns an empty object.

Does this mean that getStaticProps doesn't actually pass props to getInitialProps in the custom app?

2 replies

desaijay315 Aug 9, 2020

Since you are using getStaticProps, _app doesn't have getStaticProps, you can still use getInitialProps for other pages. This is the default behaviour, not a problem

omar-dulaimi Aug 9, 2020
Author

But what about the pages that use getStaticProps? Aren't they supposed to get their props here?

omar-dulaimi · 2020-08-09T07:03:25Z

omar-dulaimi
Aug 9, 2020
Author

Both appProps and pageProps are empty:

 const pageProps = AppContext.Component.getInitialProps ? 
     await AppContext.Component.getInitialProps(AppContext.ctx)
     : {};

 console.log('MyApp -> getInitialProps -> pageProps', pageProps);

 const appProps = App.getInitialProps ? await App.getInitialProps(AppContext): {};
 console.log('MyApp -> getInitialProps -> appProps', appProps);

7 replies

omar-dulaimi Aug 9, 2020
Author

The Head just sets meta tags according to page type; amp or not, etc.

omar-dulaimi Aug 9, 2020
Author

The Footer is just a basic page with static info.

omar-dulaimi Aug 9, 2020
Author

Utils is a helper class with many static methods.

omar-dulaimi Aug 9, 2020
Author

And this import { hostName } from '../config/variables';
just reads an env var from env, process.env.hostName

omar-dulaimi Aug 9, 2020
Author

Do you have a custom app as well?

omar-dulaimi · 2020-08-09T08:01:28Z

omar-dulaimi
Aug 9, 2020
Author

useEffect just handles page views:

    static handleFBPixelPageView(page) {
        const md = new MobileDetect(navigator.userAgent);
        const deviceOs = md.os();
        ReactPixel.fbq('track', 'PageView');
        ReactPixel.fbq('track', page, { os: deviceOs ? deviceOs : 'desktop' });
    }

0 replies

omar-dulaimi · 2020-08-10T06:55:37Z

omar-dulaimi
Aug 10, 2020
Author

Hello @desaijay315
Any luck?
If nobody is capable of solving it, then maybe it was a real issue? Maybe it shouldn't have been converted to a discussion ?

2 replies

desaijay315 Aug 10, 2020

Can you create the GitHub repo with code temporarily to reproduce the issue?

omar-dulaimi Aug 11, 2020
Author

Okay, I managed to create a repro here: https://github.com/omar-dulaimi/nextjs-no-staticprops-repro
please check it out

omar-dulaimi · 2020-08-11T15:57:12Z

omar-dulaimi
Aug 11, 2020
Author

@desaijay315 The issue is related to next-redux-wrapper library. It introduced new changes after Nextjs's latest features, their way of handling getStaticProps has changed, and since I only upgraded NextJs this issue occurred.

The docs should mention this, and next-redux-wrapper should display a warning.

Anyways, thanks for your time!

0 replies

desaijay315 · 2020-08-11T16:48:31Z

desaijay315
Aug 11, 2020

That's great that you found the issue....Please mention the issue and also let the Devs at Next.js know about it...they will upgrade the docs

…

On Tue, 11 Aug 2020, 21:27 Omar Dulaimi, ***@***.***> wrote: @desaijay315 <https://github.com/desaijay315> The issue is related to next-redux-wrapper library. It introduced new changes after Nextjs's latest features, their way of handling getStaticProps has changed, and since I only upgraded NextJs this issue occurred. The docs should mention this, and next-redux-wrapper should display a warning. Anyways, thanks for your time! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#15993 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACHKWYNQV5BT566NUTMZGXDSAFS6RANCNFSM4PYWRJPA> .

0 replies

wparam · 2020-09-28T04:27:41Z

wparam
Sep 28, 2020

I have this issue too, is this issue solved? Or we're waiting for next-redux-wrapper team's fix?

0 replies

usman786-ctrl · 2020-10-10T11:53:51Z

usman786-ctrl
Oct 10, 2020

facing the same issue and not getting the solution

0 replies

omar-dulaimi · 2020-10-10T12:47:55Z

omar-dulaimi
Oct 10, 2020
Author

@wparam @usman786-ctrl
In my case this occurred when I updated Nextjs without updating the syntax of next-redux-wrapper inside my app.
If you do use that library, make sure to go over their new syntax on their github repo. https://github.com/kirill-konshin/next-redux-wrapper

As you can see, there's a warning on top of the page saying this:
The current version of this library only works with Next.js 9.3 and newer. If you are required to use Next.js 6-9 you can use version 3-5 of this library, see branches. Otherwise, consider upgrading Next.js.

2 replies

TotallWAR Nov 25, 2020

Man, you saved DAYS of my work! Thank you very much!!!

omar-dulaimi Nov 25, 2020
Author

You're welcome, glad I could help

brunograna · 2020-11-17T19:28:42Z

brunograna
Nov 17, 2020

How did you solved this issue? Facing the same problem here

2 replies

omar-dulaimi Nov 17, 2020
Author

In my case this occurred when I updated Nextjs without updating the syntax of next-redux-wrapper inside my app.
If you do use that library, make sure to go over their new syntax on their github repo. https://github.com/kirill-konshin/next-redux-wrapper

As you can see, there's a warning on top of the page saying this:
The current version of this library only works with Next.js 9.3 and newer. If you are required to use Next.js 6-9 you can use version 3-5 of this library, see branches. Otherwise, consider upgrading Next.js.

So yeah, just upgrade next-redux-wrapper to the latest version and change how you use nextjs methods like getServerSideProps, getStaticProps, etc to their equivalent syntax.

subgero Mar 8, 2021

It would be nice if you share your code or elaborate your answer, this will help to other dev's when they face this.

lovanya · 2021-03-23T01:49:51Z

lovanya
Mar 23, 2021

I created the same issue in next.js but they moved it to discussions. Now finally can solve the problem. Thanks a lot @omar-dulaimi .

0 replies

Shorifpatwary · 2022-11-11T13:08:21Z

Shorifpatwary
Nov 11, 2022

Maybe you are calling the getStaticProps or getServerSideProps or getStaticPaths function from outside of pages or app directory (v-13). If you do that next js will send you an empty props object.
Next.js does not throw any error message to catch this error properly.

0 replies

Uh oh!

getStaticProps returns empty object at prod and dev (next v9.5.1) #15993

Uh oh!

Bug report

Describe the bug

To Reproduce

Expected behavior

System information

Additional context

Replies: 15 comments · 18 replies

Uh oh!

Uh oh!

omar-dulaimi Aug 8, 2020 Author

Uh oh!

Uh oh!

omar-dulaimi Aug 8, 2020 Author

Uh oh!

omar-dulaimi Aug 8, 2020 Author

Uh oh!

omar-dulaimi Aug 8, 2020 Author

Uh oh!

omar-dulaimi Aug 9, 2020 Author

Uh oh!

Uh oh!

omar-dulaimi Aug 9, 2020 Author

Uh oh!

omar-dulaimi Aug 9, 2020 Author

Uh oh!

omar-dulaimi Aug 9, 2020 Author

Uh oh!

omar-dulaimi Aug 9, 2020 Author

Uh oh!

omar-dulaimi Aug 9, 2020 Author

Uh oh!

omar-dulaimi Aug 9, 2020 Author

Uh oh!

omar-dulaimi Aug 9, 2020 Author

Uh oh!

omar-dulaimi Aug 9, 2020 Author

Uh oh!

omar-dulaimi Aug 10, 2020 Author

Uh oh!

Uh oh!

omar-dulaimi Aug 11, 2020 Author

Uh oh!

omar-dulaimi Aug 11, 2020 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

omar-dulaimi Oct 10, 2020 Author

Uh oh!

Uh oh!

omar-dulaimi Nov 25, 2020 Author

Uh oh!

Uh oh!

omar-dulaimi Nov 17, 2020 Author

Uh oh!

Uh oh!

Uh oh!

Replies: 15 comments 18 replies

omar-dulaimi
Aug 8, 2020
Author

omar-dulaimi Aug 8, 2020
Author

omar-dulaimi
Aug 8, 2020
Author

omar-dulaimi Aug 8, 2020
Author

omar-dulaimi
Aug 9, 2020
Author

omar-dulaimi Aug 9, 2020
Author

omar-dulaimi
Aug 9, 2020
Author

omar-dulaimi Aug 9, 2020
Author

omar-dulaimi Aug 9, 2020
Author

omar-dulaimi Aug 9, 2020
Author

omar-dulaimi Aug 9, 2020
Author

omar-dulaimi Aug 9, 2020
Author

omar-dulaimi
Aug 9, 2020
Author

omar-dulaimi
Aug 10, 2020
Author

omar-dulaimi Aug 11, 2020
Author

omar-dulaimi
Aug 11, 2020
Author

omar-dulaimi
Oct 10, 2020
Author

omar-dulaimi Nov 25, 2020
Author

omar-dulaimi Nov 17, 2020
Author