search

i18next / next-app-dir-i18next-example

Next.js 13/14 app directory feature in combination with i18next
https://locize.com/blog/next-app-dir-i18n/
175 stars 38 forks source link

Async useTranslation hook doesn't pass linting #22

Closed mickael-h closed 1 year ago

mickael-h commented 1 year ago

https://github.com/i18next/next-13-app-dir-i18next-example/blob/3d653a46ae33f46abc011b6186f7a4595b84129f/app/%5Blng%5D/page.js#L15

This line triggers an error from eslint: Error: React Hook "useTranslation" cannot be called in an async function. react-hooks/rules-of-hooks

adrai commented 1 year ago

rename it or adapt the lint rules

mickael-h commented 1 year ago

@adrai How would renaming it change anything? Sure, I can deactivate react-hooks/rules-of-hooks but I'd rather do that as a last resort...

adrai commented 1 year ago

because it's not a react hook... it has just a hooky name

pj-alvarado10 commented 1 year ago

Thank you, how can I adapt the lint rules that only deactivate the error with "useTranslation" and not all react hooks.

masakinihirota commented 1 year ago

ESlint does not support Next.js App Router rules and warns that it is against the rules to use Async Await because it assumes it is client side even though it is also server side.

ThijmenGThN commented 1 year ago

Thank you, how can I adapt the lint rules that only deactivate the error with "useTranslation" and not all react hooks.

Also looking for the same answer, would be appreciated if anyone could share the solution in this thread 🤗