react-i18next:: You will need to pass in an i18next instance by using initReactI18next

ricoxor commented 1 year ago

Hello I have an react-i18next error when I build my project.

I'm using next-i18next & next 13

Here is my dependencies :

"eslint": "8.40.0",
"eslint-config-next": "13.4.2",
"next": "13.4.3",
"next-i18next": "^13.2.2",
"postcss": "8.4.23",
"qs": "^6.11.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"react-player": "^2.12.0",
"react-slick": "^0.29.0",

The issue occur on my page /src/pages/game/[name].jsx On the top of the page I added this :

const path = useRouter().asPath;
const { t, ready } = useTranslation()
console.log(ready, t('play'), path)

Here is the console logs when I build :

[    ] - info Generating static pages (0/14)react-i18next:: You will need to pass in an i18next instance by using initReactI18next
false play /game/[name]
TypeError: Cannot read properties of undefined (reading 'attributes')
true JOUER /game/game1
true JOUER /game/game2
true JOUER /game/game3 
...

Eveything is working in dev.

How can I fix this issue please? Thank you in advance

adrai commented 1 year ago

useTranslation() should be used only in components (it's a react hook), and not at the top of the page. btw. make sure you import useTranslation from next-i18next and NOT from react-i18next. https://github.com/i18next/next-i18next#usetranslation

ricoxor commented 1 year ago

Hello, I'm using useTranslation() on top of my component. Here is the code

import Image from "next/image";
import ReactPlayer from "react-player";
import Link from "next/link";
import React from "react";
import { useState } from "react";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

const Details = ({ data }) => {
  const { t, ready } = useTranslation("common");
  console.log("Ready : " + ready);
  ....
}

export async function getStaticPaths() {
  const { data } = await api.get("/sites");
  const sites = data.data;

  const paths = sites.map((site) => ({
    params: { name: site.attributes.slug },
  }));

  return { paths, fallback: true };
}

export async function getStaticProps({ locale, params }) {
  const currentLocale = locale;
  const { name } = params;
  ....
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
      data: pageData,
    },
  };
}

What's wrong @adrai ? When I build when /pages/game/[game].jsx come the first log is always a ready to false.

ricoxor commented 1 year ago

Here is my _app.js

import { Layout } from "@/components/layout";
...
import { appWithTranslation } from 'next-i18next';
import Head from "next/head";
import { useRouter } from 'next/router';

function App({ Component, pageProps }) {
  const router = useRouter();

  return (
    <Layout>
      <Head>
       ....
      </Head>
      <Component {...pageProps} />
    </Layout>
  );
}

export default appWithTranslation(App);

adrai commented 1 year ago

Please create a minimal reproducible example repo.

ricoxor commented 1 year ago

Please create a minimal reproducible example repo.

https://github.com/ricoxor/i18n-next-build-error

adrai commented 1 year ago

this is only occurring because you've set fallback to true:

So for a non-existing route the serverSideTranslations function is never executed.

ricoxor commented 1 year ago

Thank you @adrai

i18next / next-i18next

react-i18next:: You will need to pass in an i18next instance by using initReactI18next #2164