useflyyer / next-rosetta

Next.js + Rosetta + TypeScript with native i18n support | Lightweight, simple, easy to integrate, no custom server required and efficient because will only download the locale you need.
https://next-rosetta.vercel.app
MIT License
64 stars 4 forks source link

Can't get it working after building. #4

Closed drj17 closed 3 years ago

drj17 commented 3 years ago

Works fine in dev mode, but when using yarn build none of the string are showing up.

next.config.js

module.exports = {
  i18n: {
    locales: ["en", "de"],
    defaultLocale: "en",
  },
};

en.ts

import { Locale } from ".";

export const table: Locale = {
  login: {
    forgot_password: "Forgot Password?",
    log_in: "Log In",
  },
};

in `app.tsx`

```l
<I18nProvider table={pageProps.table}>
     <Component {...pageProps} />
</I18nProvider>

login.tsx

function Login() {
  const i18n = useI18n<Locale>();
  const { t, locale } = i18n;
  console.log(locale())
 return (
    <div>{t("login.log_in")}</div>
  )
}

export const getStaticProps: GetStaticProps<I18nProps<Locale>> = async (
  context
) => {
  const locale = context.locale || context.defaultLocale;
  const { table = {} } = await import(`i18n/${locale}`) 
  console.log(locale);
  return { props: { table } }; 
};

It seems when I check locale() in the console that it is undefined. Am I doing something wrong here?

lopezjurip commented 3 years ago

I think is this line:

const { table = {} } = await import(`i18n/${locale}`)

Try using a relative path

const { table = {} } = await import(`../i18n/${locale}`)
drj17 commented 3 years ago

Hey, I think it was actually a bug in NextJS, upgrading to v10.0.5-canary.1 fixed it for me. FYI the issue was that the locale returned from useRouter was undefined.