Getting error: You can not use getInitialProps with getServerSideProps. Please remove getInitialProps.

[ahmadalfy]

My page uses getServersideProps to handle authorization guards. Whenever I wrap my component with withTranslation I get the following error:

next-translate - compiled page: /_error - locale: ar - namespaces: common, footer - used loader: getInitialProps
Error: You can not use getInitialProps with getServerSideProps. Please remove getInitialProps. /onboarding
    at renderToHTML (/app/website/node_modules/next/dist/next-server/server/render.js:21:1728)
    at /app/website/node_modules/next/dist/next-server/server/next-server.js:112:126
    at /app/website/node_modules/next/dist/next-server/server/next-server.js:105:148
    at DevServer.renderToHTMLWithComponents (/app/website/node_modules/next/dist/next-server/server/next-server.js:137:393)
    at DevServer.renderToHTML (/app/website/node_modules/next/dist/next-server/server/next-server.js:138:621)
    at async DevServer.renderToHTML (/app/website/node_modules/next/dist/server/next-dev-server.js:36:578)
    at async DevServer.render (/app/website/node_modules/next/dist/next-server/server/next-server.js:75:160)
    at async Object.fn (/app/website/node_modules/next/dist/next-server/server/next-server.js:58:672)
    at async Router.execute (/app/website/node_modules/next/dist/next-server/server/router.js:25:67)
    at async DevServer.run (/app/website/node_modules/next/dist/next-server/server/next-server.js:68:1042)
    at async DevServer.handleRequest (/app/website/node_modules/next/dist/next-server/server/next-server.js:32:504)

This is the function that I am using:

export const getServerSideProps: GetServerSideProps = async (ctx) => {
	const { req } = ctx;
	if (req.cookies.access_token) {
		// Do nothing, allow the user to access the page
	} else {
		return {
			redirect: {
				permanent: false,
				destination: '/login',
			},
		};
	}
	return { props: {} };
};

As you can see it cannot detect that I am using getServerSideProps and it tries to use getInitialProps. How can I fix that?

[carlosds731]

I'm having the same problem, I think is related with https://github.com/vinissimus/next-translate/blob/master/src/plugin/loader.ts#L76

[aralroca]

@ahmadalfy I see that is no problem of getServerSideProps, we have this test: https://github.com/vinissimus/next-translate/blob/8c86d102cb99d04f977fa7baf3ccb79f312d1dde/tests/hasHOC.test.js#L381-L398 that is testing that is not considered as getInitialProps toBe(false). I changed to your function and we get the same result. Would you share more code from your page to see where the bug is? Thank you very much.

[aralroca]

I'm having the same problem, I think is related with https://github.com/vinissimus/next-translate/blob/master/src/plugin/loader.ts#L76

Or maybe is related with this check as you comment https://github.com/vinissimus/next-translate/blob/8a28e76bd75c958191db2fa8cb7b137625c4e774/src/plugin/loader.ts#L91

The detection of the getInitialProps should be improved because if there is the name of getInitialProps (even if it's not used) in the page code it would be detected as loader... I don't know if this is the case.

[fuzunspm]

I'm having the same issue. my class based index.js has a getServerSideProps in it and I'm using withTranslation

[blackrabbit944]

I'm having the same issue too, is there any one could help?

[ahmadalfy]

@blackrabbit944 @fuzunspm I fixed it by making the page act as a wrapper so they don't use withTranslation. They load components that uses withTranslation and it worked fine.

So code example:

My login page for example

// The guard that throws an error when imported in a page using `withTranslation`.
export const getServerSideProps = authorizationGuard;

export default class Login extends React.Component
  render(): JSX.Element {
    // This is the component where I moved `withTranslation` to:
     <LoginButtons />
  }
}

Login button component

class LoginButtons extends React.Component<Props> {
...
}

export default withTranslation(LoginButtons);

Hope that helps