next-translate: withNx and next-translate results in duplicate export of '__N_SSG' when using getStaticProps

Current Behavior

When using getStaticProps on a non-dynamic page (e.g. index.tsx) while using next-translate with withNx it results in the following error:

Module parse failed: Duplicate export '__N_SSG' (8:11)
File was processed with these loaders:
 * ../../node_modules/@next/react-refresh-utils/loader.js
 * ../../node_modules/next/dist/build/babel/loader/index.js
 * ../../node_modules/next-translate/lib/cjs/plugin/loader.js
 * ../../node_modules/@next/react-refresh-utils/loader.js
 * ../../node_modules/next/dist/build/babel/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import styles from './index.module.css';
| export var __N_SSG = true;
> export var __N_SSG = true;
| export function Index() {
|   /*

and does not load the page, or any the entire app for that matter, at all.

Funnily enough it works fine with a dynamic page, e.g. [slug].tsx.

Expected Behavior

It should be completely fine to use getStaticProps while using next-translate in a Nx monorepo.

Steps to Reproduce

I created a minimal GitHub repo where you can reproduce this error: https://github.com/amosbastian/nrwl-repro. I followed https://nx.dev/latest/react/guides/nextjs and simply added next-translate and getStaticProps to index.tsx.

Failure Logs

As shown above:

error - ./pages/index.tsx
Module parse failed: Duplicate export '__N_SSG' (8:11)
File was processed with these loaders:
 * ../../node_modules/@next/react-refresh-utils/loader.js
 * ../../node_modules/next/dist/build/babel/loader/index.js
 * ../../node_modules/next-translate/lib/cjs/plugin/loader.js
 * ../../node_modules/@next/react-refresh-utils/loader.js
 * ../../node_modules/next/dist/build/babel/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import styles from './index.module.css';
| export var __N_SSG = true;
> export var __N_SSG = true;
| export function Index() {
|   /*
getStaticProps
next-translate - compiled page: / - locale: en - namespaces: common - used loader: getStaticProps
Could not find files for / in .next/build-manifest.json
Could not find files for / in .next/build-manifest.json

Environment

Node : 14.16.1
OS   : darwin x64
npm  : 7.20.5

I also created an issue in the nrwl/nx repository since I wasn’t sure which is causing the error.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 15 (9 by maintainers)

Most upvoted comments

@shelooks16 @amosbastian I’ve made a fix in the 1.1.0-canary.4, I hope that with this version it will work. At least @amosbastian with your repo works fine with this version (I have tried to create several pages and several languages too and everything seems to work fine).

aralroca on Sep 17, 2021

@aralroca sorry. but also thank you

quyphan97 on Sep 19, 2021

@quyphan97 Next.js does not support “next export” yet for i18n routing. So there is no solution now, we’ll have to wait for Next.js to implement it.

aralroca on Sep 19, 2021

@aralroca I checked out 1.1.0-canary.5

Now it is good, build goes through 🚀

Thanks for the fixes 😉 ❤️

shelooks16 on Sep 18, 2021

@shelooks16 thanks to report it. It should work well in 1.1.0-canary.5. I’ve applied the same as for the __N_SSG to the __N_SSP.

aralroca on Sep 18, 2021

It seems you’ve fixed it 🙏 thanks! ❤️

amosbastian on Sep 17, 2021

I experienced the same problem. Playing around for a little I noticed that the error dissapears when changing the way the component and getServerSideProps/getStaticProps are defined.

Produces the error:

function MyPage() { ... }

export const getServerSideProps = async () => { ... }

export default MyPage;

The error vanishes when changing function expression to declaration and vice versa.

Does NOT produce the error:

const MyPage = () => { ... }

export async function getServerSideProps() { ... }

export default MyPage;

shelooks16 on Sep 17, 2021