Next-i18next: Cannot destructure property `components` of 'undefined' or 'null'.

[safakcosar]

I completed my project by using next-i18next. The project is working fine on local server. After I deployed the project to the server, firebase function console is giving me this error.

TypeError: Cannot destructure propertycomponentsof 'undefined' or 'null'. at Server.renderToHTMLWithComponents (/srv/node_modules/next/dist/next-server/server/next-server.js:560:37) at Server.renderErrorToHTML (/srv/node_modules/next/dist/next-server/server/next-server.js:821:35) at <anonymous>

If I remove the codeline "appwithtranslation" from _app.js the page is loading without translation on the server.

import React from 'react'
import App from 'next/app'      
import { appWithTranslation } from '../i18n'

class MyApp extends App {
  render() {
      const { Component, pageProps } = this.props
      console.log("_appp",this.props)
    return ( 
        <Component {...pageProps} />
    )
  }
}

export default appWithTranslation(MyApp)

i18n.js

const NextI18Next = require('next-i18next').default

module.exports = new NextI18Next({
  defaultLanguage: 'en',
  otherLanguages: ['tr',"ar","ru"],
  localeSubpaths: {
    ar: "ar",
    en: 'en',
    tr: 'tr',
    ru:"ru"
  }
})

server.js

`const express = require('express')
const next = require('next')
const nextI18NextMiddleware = require('next-i18next/middleware').default

const nextI18next = require('./i18n')

const port = process.env.PORT || 3000
const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handle = app.getRequestHandler();

(async () => {
  await app.prepare()
  const server = express()

  await nextI18next.initPromise
  server.use(nextI18NextMiddleware(nextI18next))

  server.get('*', (req, res) => handle(req, res))

  await server.listen(port)
  console.log(`> Ready on http://localhost:${port}`) // eslint-disable-line no-console
})()` 

Is there any solution that I can fix this problem?

[isaachinman]

Can you please provide a reproducible repository?

[aquiseb]

It seems to occur only when defaultLanguage does not have a matching locale dir with its common.json inside it. The error seems to only occur in production.

So let's say defaultLanguage is set to de, the error is thrown when you forget to create public/static/locales/de/common.json.

[maysam]

@safakcosar how did you get to solve yours?

[moaaz-bhnas]

Please, let us know if you found any solution.

[Exilz]

I encountered the same problem when I deployed my application on AWS beanstalk. It turns out I simply forgot to add a step that copies the public folder (which contains the translations, hence this error) in my Dockerfile.
Make sure your server can properly access your JSON files.

[davidwgrossman]

Hey @Exilz, a quick question: what was the path of the public folder in your Dockerfile relative to the .next build?

[Exilz]

Hey @Exilz, a quick question: what was the path of the public folder in your Dockerfile relative to the .next build?

Hi, in my case I just had to add this

COPY --from=builder /app/public/ ./public

[nikishah499]

does anyone found any solution for this?
I am getting the same error. I have added all the matching locale dir with its common.json inside it but still getting this error. The error seems to only occur in production.