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

omar-dulaimi · 2020-08-07T13:53:42Z

omar-dulaimi
Aug 7, 2020

Hello,
I'm running into a weird issue. using the latest nextjs @9.5.1
Here's the code in question:


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;

Answered by jamesmosier

Aug 11, 2020

The issue is with your _app. Upgrading next-redux-wrapper to version 6 and following the with-redux-wrapper example will be helpful.

View full answer

jamesmosier · 2020-08-07T22:24:44Z

jamesmosier
Aug 7, 2020

This works once I added an ending quote to pageTitle: "hello world, => pageTitle: "hello world",

4 replies

omar-dulaimi Aug 7, 2020
Author

This is just a typo here, it doesn't exist in the original code

omar-dulaimi Aug 8, 2020
Author

Hey @jamesmosier I kept trying since yesterday, I'm not able to locate the problem

jamesmosier Aug 9, 2020

What does your _app.js look like?

omar-dulaimi Aug 9, 2020
Author

This is all of it @jamesmosier

import withRedux from 'next-redux-wrapper';
import App from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import Amplify from 'aws-amplify';
import ReactPixel from 'react-facebook-pixel';
import Router from 'next/router';
import withGA from 'next-ga';
import * as Sentry from '@sentry/browser';
import MobileBarController from '../components/mobile-bar-controller';
import rootReducer from '../store/reducers/root-reducer';
import { userLogin } from '../store/actions/actions';
import Utils from '../util/utils';
import {
    apiUrl,
    facebookPixelId,
    sentryDsnFrontend,
} from '../config/variables';


const makeStore = (initialState, options) => {
    return createStore(rootReducer, initialState);
};

Amplify.configure({
    Auth: {
        identityPoolId: 'id',
        region: 'region',
    },
    API: {
        graphql_endpoint: apiUrl,
        region: 'region',
        identityPoolId: 'poolId',
    },
    bucket: 'items-bucket',
});

Sentry.init({
    dsn: `${sentryDsnFrontend}`,
});
class MyApp extends App {
    constructor(props) {
        super(props);
        if (!Utils.isServer()) {
            let user = Utils.getCookieAsJson('persist:user');
            let token = Utils.getCookie('user_token');
            if (user && token) {
                props.store.dispatch(userLogin(user, token));
            }
        }
    }
    static async getInitialProps({ Component, ctx }) {
        if (
            Utils.isServer() &&
            ctx &&
            ctx.req &&
            ctx.req.headers &&
            ctx.req.headers.cookie
        ) {
            let cookie = ctx.req.headers.cookie;
            if (cookie) {
                let cookies = cookie.split(';');
                let user = null;
                let token = null;

                for (let i = 0; i < cookies.length; i++) {
                    if (cookies[i].indexOf('persist:user') > -1) {
                        user = JSON.parse(
                            unescape(cookies[i].replace('persist:user=', ''))
                        );
                    } else if (cookies[i].indexOf('user_token') > -1) {
                        token = cookies[i].replace('user_token=', '');
                    }
                }
                if (user && token) {
                    ctx.store.dispatch(userLogin(user, token));
                }
            }
        }
        const pageProps = Component.getInitialProps
            ? await Component.getInitialProps(ctx)
            : {};
        return { pageProps };
    }

    componentDidMount() {
        ReactPixel.init(
            facebookPixelId,
            {},
            { debug: false, autoConfig: false }
        );
    }

    componentDidCatch(error, errorInfo) {
        Sentry.withScope((scope) => {
            Object.keys(errorInfo).forEach((key) => {
                scope.setExtra(key, errorInfo[key]);
            });

            Sentry.captureException(error);
        });

        super.componentDidCatch(error, errorInfo);
    }

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

export default withRedux(makeStore)(withGA('GA-ID', Router)(MyApp));

omar-dulaimi · 2020-08-08T06:26:33Z

omar-dulaimi
Aug 8, 2020
Author

I added the issue on Stackoverflow in case anybody wants to help there:
https://stackoverflow.com/questions/63312375/getstaticprops-returns-empty-object-at-prod-and-dev-next-v9-5-1

0 replies

omar-dulaimi · 2020-08-08T06:54:16Z

omar-dulaimi
Aug 8, 2020
Author

I went inside next-server.js file inside nextjs and logged a few values related :

}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

0 replies

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

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?

0 replies

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

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

0 replies

omar-dulaimi · 2020-08-10T06:57:23Z

omar-dulaimi
Aug 10, 2020
Author

Hello @jamesmosier
Any update?
It's been three days since I posted this, so perhaps it's a real issue?
Anywhere I could find a working example of custom _app, _document and server that use getStaticProps in one of it's pages?

2 replies

jamesmosier Aug 10, 2020

Honestly I can't reproduce this with piecing together the various code snippet you've provided. If you have a GitHub repository you could share that would be a great help.

The blog-starter example has a custom app, document, and getStaticProps.

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

jamesmosier · 2020-08-11T13:29:32Z

jamesmosier
Aug 11, 2020

The issue is with your _app. Upgrading next-redux-wrapper to version 6 and following the with-redux-wrapper example will be helpful.

1 reply

omar-dulaimi Aug 11, 2020
Author

@jamesmosier Thanks for the help. Just I think that the Nextjs docs should reflect this note when somebody upgrades to the latest version.
Since the next-redux-wrapper had introduced new changes after the latest Nextjs features. Would be nice to see that in the docs instead of getting lost for multiple days.

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

Uh oh!

Uh oh!

omar-dulaimi Aug 7, 2020

Replies: 7 comments · 7 replies

Uh oh!

jamesmosier Aug 7, 2020

Uh oh!

omar-dulaimi Aug 7, 2020 Author

Uh oh!

omar-dulaimi Aug 8, 2020 Author

Uh oh!

jamesmosier Aug 9, 2020

Uh oh!

omar-dulaimi Aug 9, 2020 Author

Uh oh!

omar-dulaimi Aug 8, 2020 Author

Uh oh!

Uh oh!

omar-dulaimi Aug 8, 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!

jamesmosier Aug 10, 2020

Uh oh!

omar-dulaimi Aug 11, 2020 Author

Uh oh!

jamesmosier Aug 11, 2020

Uh oh!

omar-dulaimi Aug 11, 2020 Author

omar-dulaimi
Aug 7, 2020

Replies: 7 comments 7 replies

jamesmosier
Aug 7, 2020

omar-dulaimi Aug 7, 2020
Author

omar-dulaimi Aug 8, 2020
Author

omar-dulaimi Aug 9, 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 10, 2020
Author

omar-dulaimi Aug 11, 2020
Author

jamesmosier
Aug 11, 2020

omar-dulaimi Aug 11, 2020
Author