带有 next-i18next TypeError 的 NextJs 应用程序：NextI18Next 不是构造函数

问题描述

我正在使用 next.JS 和包 next-i18next 构建一个多语言网站。我正在将项目从 i18next 移至 next-i18next

就绪 - 在 0.0.0.0:3000 上启动服务器，网址：http://localhost:3000

仍然收到以下错误，有人可以帮忙吗？

TypeError: NextI18Next 不是构造函数

in18.js

const NextI18Next = require('next-i18next/dist/commonjs')
const path = require('path')

const NextI18NextInstance = new NextI18Next({
    browserLanguageDetection: true,fallbackLng: false,defaultLanguage: 'en',otherLanguages: ['en','de','cs'],localeSubpaths: {
        en: "en",de: "de",cs: "cs"
    },load: "currentOnly",ns: ["home","team","common","service","projects"],defaultNS: "common",localePath: path.resolve('./public/static/locales'),localeStructure: "{lng} / {ns}",interpolation: {
        prefix: "{",suffix: "}",},debug: false,//process.env.NODE_ENV !== "production",saveMissing: false,localeExtension: 'json',serializeConfig: true,})
module.exports = NextI18NextInstance

next.config.js

const withImages = require('next-images')
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");
const { i18n } = require('./in18')
module.exports = {
    future: {
        webpack5: true,reactStrictMode: true,withImages,i18n,withPlugins : {

    }
}

_app.js

import App from 'next/app';
import { appWithTranslation } from '../next-i18next.config.js'
class MyApp extends App {

  static async getinitialProps({Component,ctx}) {
    const pageProps = Component.getinitialProps ? await Component.getinitialProps(ctx) : {};
    return {pageProps: pageProps};
  }
//    <Provider store={store}>
//           <AnalyticsTracker useAnalytics={this.props.useAnalytics} />
  // <Component {...pageProps} />
//</Provider>
  render() {
    const { Component,pageProps } = this.props
    return (

          <Component {...pageProps} />

    )
  }
}

export default appWithTranslation(MyApp);

index.js

import Link from "next/link";
import { i18n } from 'in18'



const  Navbar = function({ i18n }){
        return (
            <React.Fragment>
                {/* Start Mobile Navbar */}
                <div id="offcanvas-flip" className="mobile-navbar uk-mobile-navbar bg-aqiros" uk-offcanvas="flip: true; overlay: true">
                    <div className="uk-offcanvas-bar">

                        <buthrefn className="uk-offcanvas-close" type="buthrefn" uk-close="true"/>

                        <nav className="uk-navbar-container" data-uk-scrollspy-nav="offset: 0; closest: li; scroll: true">
                            <ul className="uk-navbar-nav">

                                    {
                                        i18n.t('common:menu',{ returnObjects: true}).map(item=>(
                                            item.subMenu === false

                                                ?
                                                    <li key={"link-"+item.id} className={this.props.pathname === item.link ? "uk-active" : ""}>
                                                        <Link  href={item.link} as={item.link}>{item.title}</Link>
                                                    </li>
                                                :
                                                    <li key={"link-"+item.id} className={this.props.pathname === item.link ? "uk-active" : ""}>
                                                        <Link  href={item.link} as={item.link}>{item.title}</Link>
                                                        <div uk-dropdown="mode: click">
                                                            <ul className="uk-nav uk-dropdown-nav">
                                                                {
                                                                    item.subArticles.map(item=>(
                                                                        <Link key={"sub-link-"+item.id} href={item.link}>{item.title}</Link>
                                                                    ))
                                                                }
                                                            </ul>
                                                        </div>
                                                    </li>
                                        ))
                                    }
                            </ul>
                        </nav>
                    </div>
                </div>
                {/* End Mobile Navbar */}
            </React.Fragment>
        );
}
index.getinitialProps = () => {
    return {
        namespacesrequired: ["common"]
    }
}

export default withTranslation()(Navbar);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）