Next.js: `next export` doesn't work on next.js/examples/with-react-i18next

[adwd]

Example name

with-react-i18next

Describe the bug

next export doesn't work

To Reproduce

$ npx create-next-app --example with-react-i18next with-react-i18next-app 
$ cd with-react-i18next-app
$ npm run build
$ npx next export
> using build directory: /path/to/with-react-i18next-app/.next
  copying "static build" directory
> No "exportPathMap" found in "next.config.js". Generating map from "./pages"
> exporting path: /index
TypeError: Cannot set property 'toJSON' of undefined
    at I18n.module.exports.i18n.getInitialProps (/path/to/with-react-i18next-app/.next/server/static/_2oMKBcoEPTvhpRTcytEv/pages/index.js:156:19)
    at Function._callee$ (/path/to/with-react-i18next-app/.next/server/static/_2oMKBcoEPTvhpRTcytEv/pages/index.js:314:91)
    at tryCatch (/path/to/with-react-i18next-app/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/path/to/with-react-i18next-app/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/path/to/with-react-i18next-app/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/path/to/with-react-i18next-app/.next/server/static/_2oMKBcoEPTvhpRTcytEv/pages/index.js:272:103)
    at _next (/path/to/with-react-i18next-app/.next/server/static/_2oMKBcoEPTvhpRTcytEv/pages/index.js:274:194)
    at /path/to/with-react-i18next-app/.next/server/static/_2oMKBcoEPTvhpRTcytEv/pages/index.js:274:364
    at new Promise (<anonymous>)
    at Function.<anonymous> (/path/to/with-react-i18next-app/.next/server/static/_2oMKBcoEPTvhpRTcytEv/pages/index.js:274:97)

Expected behavior

next export runs successfully

Screenshots

no screenshots

System information

• OS: macOS
• Browser: --
• Version of Next.js: 7.0.0

$ node -v
v10.8.0
$ npm -v
6.3.0

Additional context

copied from https://github.com/i18next/react-i18next/issues/509, but updated error stacktrace

[nhducit]

because of req.i18n is undefined when we run next export. I have the same issue but do not know how to fix it

[nhducit]

I can fixed the issue with the following code

1. move locales folders to static
2. edit i18n.js file

const options = {
  backend: { <=== add this option
    loadPath: '/static/locales/{{lng}}/{{ns}}.json'
  },
....
}

1. edit withI18next.js file
   from

    const i18nInitialProps = ctx.req? i18n.getInitialProps(ctx.req, namespaces) : {}

to

    const i18nInitialProps =
      ctx.req && ctx.req.i18n ? i18n.getInitialProps(ctx.req, namespaces) : {}

[nhducit]

@adwd hope it can help

[lipoolock]

Hello @nhducit
Thanks for help.
Probably you forgot to mention the paths' update in server.js from /locales to /static/locales ?

[nhducit]

@lipoolock did it solve the current issue. I am not sure should I send a PR to fix this issue to with-react-i18next example. Because of not everyone use with-react-i18next example with export. Create a new example seems a better solution

[lipoolock]

Export feature is working with your approach, but content remains not translated. So, nothing is broken in the console, however the static export doesn't play like the next dev server.
The issue there is that the language context i18n is not passed to children components during the export job

[jamuhl]

FYI i updated the sample here: https://github.com/i18next/react-i18next/tree/master/example/nextjs to work with react-i18next v8.0.6 hopefully fixing some of the issues - not sure if it helps with the export issue (but i guess no).

If it helps we could incorporate the changes done by @nhducit there...before merging back here??

[geoffwhitehead]

Hi,

I'm also having trouble with this.

I've copied over the the changes in the latest example files @jamuhl posted above.

I was getting errors related to i18n being undefined so added the following lines to i18n.js

...
  if (req) req.i18n.toJSON = () => null;

  const ret = {
    i18n: req ? req.i18n : i18n
  };

  if (req) {
...

to

...
  if (req && req.i18n) req.i18n.toJSON = () => null;

  const ret = {
    i18n: req && req.i18n ? req.i18n : i18n
  };

  if (req && req.i18n) {
...

This resulted in the app working in dev, building, and exporting without errors. But when serving the exported build i get 404's when it tries to access the language files in /locale. Checking the /out directory doesn't show any locale files.

I also tried moving all the language files into /static/locale following @nhducit example and made the appropriate path changes to server.js. This resulted in the same 404 errors and the locale files apparently not being included in the exported build.

I'm not really sure how to debug further, any ideas would be really appreciated.

[nhducit]

you can check my repo @geoffwhitehead https://github.com/nhducit/with-react-i18next-app

[jamuhl]

@timneutkens was fixed in https://github.com/i18next/react-i18next/tree/master/example/nextjs and will be merged soon back to next.js with-react-i18next sample.

guess this could be closed for now