Issue in getInitialProps after upgrading NextJs to v9.5.3 #17217

ghost · 2020-09-19T07:33:40Z

ghost
Sep 19, 2020

Previously I was using the NextJs v9.4.4, in that version getInitialProps was working fine but after upgrading it to the latest version I was getting an error which says: context.req is undefined.
Here is the code snippet in which I was getting error:

LessonPage.getInitialProps = async context => {
  const { whiteboardEvents, lesson } = context.req;
  return {
    whiteboardEvents,
    lesson,
  };
};

jamesmosier · 2020-09-19T17:56:22Z

jamesmosier
Sep 19, 2020

Hi @SiddhantJ007, do you have a custom _app.js?

If so, are you passing context to App.getInitialProps?

MyApp.getInitialProps = async (appContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps }
}

Edit:

It should be:

export async function getServerSideProps(context) {
  const { whiteboardEvents, lesson } = context.query;
  return {
    props: {
      whiteboardEvents: whiteboardEvents || null,
      lesson: parse(stringify(lesson)),
    },
  };
}

context.query is how you get the query string. docs

LessonPage.getInitialProps = async context => {
  const { whiteboardEvents, lesson } = context.query;
  return {
    whiteboardEvents,
    lesson,
  };
};

docs for getInitialProps

14 replies

ghost Sep 22, 2020

@jamesmosier This is how I implemented getServerSideProps.

const LessonPage = ({ whiteboardEvents, lesson }) => {
  return (
    <>
      {typeof window !== 'undefined' && (
        <Head>
          <title>Vidyalai Collaborative Classroom Beta</title>
        </Head>
      )}
      <LessonMeeting lesson={lesson} whiteboardEvents={whiteboardEvents} />
    </>
  );
};

export async function getServerSideProps(context) {
  const { whiteboardEvents, lesson } = context.req;
  return {
    props: {
      whiteboardEvents: whiteboardEvents || null,
      lesson: parse(stringify(lesson)),
    },
  };
}

jamesmosier Sep 22, 2020

It should be:

export async function getServerSideProps(context) {
  const { whiteboardEvents, lesson } = context.query;
  return {
    props: {
      whiteboardEvents: whiteboardEvents || null,
      lesson: parse(stringify(lesson)),
    },
  };
}

context.query is how you get the query string. docs

LessonPage.getInitialProps = async context => {
  const { whiteboardEvents, lesson } = context.query;
  return {
    whiteboardEvents,
    lesson,
  };
};

docs for getInitialProps

ghost Sep 23, 2020

@jamesmosier By replacing req with query, I get status code 500.

ghost Sep 23, 2020

            <Link
              href={
                lesson.isDemo
                  ? `/classrooms/room/demo`
                  : `/lessons/${lesson.meetingId}`
              }
            >
              <Button variant={'contained'} className={'joinLesson'}>
                <span className={'text'}>JOIN LESSON</span>
                <Icon>keyboard_arrow_right</Icon>
              </Button>
            </Link>

@jamesmosier Is it necessary to include an anchor tag in the above code and if yes then how?

ghost Sep 23, 2020

@jamesmosier Issue is solved now, the problem was with the API call.

Issue in getInitialProps after upgrading NextJs to v9.5.3 #17217

Uh oh!

Uh oh!

ghost Sep 19, 2020

Replies: 1 comment · 14 replies

Uh oh!

Uh oh!

jamesmosier Sep 19, 2020

Uh oh!

ghost Sep 22, 2020

Uh oh!

Uh oh!

jamesmosier Sep 22, 2020

Uh oh!

ghost Sep 23, 2020

Uh oh!

Uh oh!

ghost Sep 23, 2020

Uh oh!

ghost Sep 23, 2020

ghost
Sep 19, 2020

Replies: 1 comment 14 replies

jamesmosier
Sep 19, 2020