Cannot destructure property `components` of 'undefined' or 'null'.

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?

[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

[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.