React-i18next: 'Converting circular structure to JSON' error when providing the req.i18n instance of i18next-express-middleware

[guillecro]

Hi, thanks for the help
I am using the following stack:

"dependencies": {
    "i18next": "^11.3.2",
    "i18next-browser-languagedetector": "^2.2.0",
    "i18next-express-middleware": "^1.1.1",
    "i18next-node-fs-backend": "^1.0.0",
    "i18next-xhr-backend": "^1.5.1",
    "react-i18next": "^7.6.1",
  }

So basically i am using nextjs and I am testing i18next with react-i18next. My nextjs is v.4.
I have this small page that inside renders the following component:

import React from 'react'
import { I18nextProvider } from 'react-i18next'
import Limbo from './limbo'

export default class extends React.Component {
  static async getInitialProps ({ req }) {
    const i18n = req.i18n
    return { i18n }
  }

  render () {
    console.log(this.props.i18n)
    return (
      <I18nextProvider i18n={this.props.i18n}>
        <Limbo />
      </I18nextProvider>
    )
  }
}

So thanks to i18next-express-middleware i get the i18next instance, as you can see here.

But I get this error...

Even if the component doesn't have any t function or translate hoc, it doesnt render..
Can you help me figuring out what is happening here?
Also, do you know projects using the same stack? I followed the with-react-i18next example the nextjs repository has but I am not really sure if the example uses the i18next instance that i18next-express-middleware is providing.

[jamuhl]

this is essential: https://github.com/zeit/next.js/blob/canary/examples/with-react-i18next/i18n.js#L44

[jamuhl]

could you solve this....?

[jamuhl]

closing due inactivity

[schneck]

I have exactly the same issue, and found the location of the circular reference:
i18n.services.languageDetector.services

[jamuhl]

you can't pass down i18n on initial props to client...see the next-i18next how they solved it https://github.com/isaachinman/next-i18next/blob/master/src/hocs/app-with-translation.js#L117

[schneck]

Thanks, that solves it!

[crusenov]

@jamuhl The link https://github.com/isaachinman/next-i18next/blob/master/src/hocs/app-with-translation.js#L117 is not found.

[jamuhl]

@crusenov https://github.com/isaachinman/next-i18next/blob/master/src/hocs/app-with-translation.tsx#L143

      // Step 4: Overwrite i18n.toJSON method to be able to serialize the instance
      if (req && req.i18n) {
        req.i18n.toJSON = () => null
        i18nServerInstance = req.i18n
      }

[crusenov]

Thanks! :)