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 property components of '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.

[gravelcycles]

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.

[natterstefan]

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.

Hi @nikishah499,

I have a similar problem when I deploy my app on Vercel... Have you figured out a solution?

FTR: It seems to be related to using >= next@10.2.x, as described here #1202 (comment).

[eric-burel]

This seems to work for me (using an older version of next-i18next, v5):

const localePath =
  typeof path.resolve === "function"
    ? path.join(process.cwd(), `public/locales`) //path.resolve("./public/locales")
    : "/locales";
const i18nInstance = new I18N({
  defaultLanguage: "en",
  otherLanguages: ["fr"],
  localeSubpaths: {},
  localePath,
});

In particular it seems that the "browser" localePath should be correct. Previously I was using ./public/locales, that was incorrect,. Before Webpack 5, I suspect my previous setup worked only because path was accidentally poly-filled in the browser.

[rimoza]

I get this error when I run yarn dev, If there is any solution

[raysk4ever]

Also, this error might come if you try to import the backend package/file on the Frontend. Just remove them if you might import them mistakenly.

[Rychhhh]

@rimoza im just rerun ' npm run dev ' in my terminal and that will be normal again