Type error while passing i18next instance to I18nextProvider

Question

Error:

Type 'Promise' is missing the following properties from type 'i18n': t, init, loadResources, use, and 32 more.ts(2740) index.d.ts(344, 3): The expected type comes from property 'i18n' which is declared here on type 'IntrinsicAttributes & I18nextProviderProps & { children?: ReactNode; }'

i18n/intex.ts

import { NODE_ENV } from "@/config";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

export default i18n.use(initReactI18next).init({
  fallbackLng: "en",
  debug: NODE_ENV === "development"
});

providers/app.tsx

import { AuthProvider } from "@/lib/auth";
import { queryClient } from "@/lib/react-query";
import { ReactNode, Suspense } from "react";
import { QueryClientProvider } from "react-query";
import { BrowserRouter as Router } from "react-router-dom";
import { ReactQueryDevtools } from "react-query/devtools";
import { ConfigProvider } from "antd";
import en from "antd/lib/locale/en_US";
import { I18nextProvider } from "react-i18next";
import i18n from "@/i18n";

type AppProviderProps = {
  children: ReactNode;
};

export const AppProvider = ({ children }: AppProviderProps) => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ConfigProvider locale={en}>
        <QueryClientProvider client={queryClient}>
          {import.meta.env.DEV && <ReactQueryDevtools />}
          <AuthProvider>
            <I18nextProvider i18n={i18n}>
              <Router>{children}</Router>
            </I18nextProvider>
          </AuthProvider>
        </QueryClientProvider>
      </ConfigProvider>
    </Suspense>
  );
};

adrai · Accepted Answer · 2022-04-06 07:30:42Z

3

// this returns a promise not an i18n instance
export default i18n.use(initReactI18next).init({
  fallbackLng: "en",
  debug: NODE_ENV === "development"
});

this should work:

// don't care for the promise
i18n.use(initReactI18next).init({
  fallbackLng: "en",
  debug: NODE_ENV === "development"
});

// just return the instance you have
export default i18n;

or await the promise (this will only work with top level await support):

export default await i18n.use(initReactI18next).init({
  fallbackLng: "en",
  debug: NODE_ENV === "development"
});

answered Apr 6, 2022 at 7:30

adrai

2,5221 gold badge17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Type error while passing i18next instance to I18nextProvider

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related