Next-i18next: Missing types in 8.0.0-beta

[TKone7]

Describe the bug

I tried out the new beta release that integrates with Next's new i18n internationalization features. It works all very nicely, thanks for the fast development towards this new release. There is only one thing that holds me back from deploying it Vercel.
When importing {appWithTranslation} or {useTranslation} from 'next-i18next' in any typescript file (e.g. _app.tsx) I get the warning '"../node_modules/next-i18next/types"' has no exported member named 'appWithTranslation'. Did you mean 'AppWithTranslation'?
It seems like there are missing exports in that types.d.ts. While the local server still works, the build process to Vercel fails.

Occurs in next-i18next version

8.0.0-beta.0

Steps to reproduce

Clone the demo repo at https://github.com/isaachinman/next-i18next-vercel and simply change the file extension of pages/_app.js to pages/_app.tsx. The import warning will then be displayed.

Expected behaviour

Correct type definitions.

[isaachinman]

Yep, types and tests are both incomplete. Is this something you'd be willing to help with?

[pawelphilipczyk]

I'm not sure this is related but as I see the same issues in addition to that when I go to page with useTranslation component I'm seeing this error:

error - ./node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:28:0
Module not found: Can't resolve 'fs'
null

The component is exporting getStaticProps the same way as in basic example.

[isaachinman]

@pawelphilipczyk That sounds like a completely different kind of problem. Please open a separate issue and share your repo so we can debug.

[pawelphilipczyk]

Thanks for quick reply, I've messed up my imports because of the types error above.

[pawelphilipczyk]

OK, I would like to clarify this a bit more. I might know too little about Typescript but the import is not only complaining about missing type import - it's actually trying to import something else and result is undefined.
For example when I have getStaticProps function that runs serverSideTranslations the resulting error is Object(...) is not a function.

[TKone7]

is this something you'd be willing to help with?

Thanks for the update. I am not really experienced in package development. But I tried my best and came up with PR #908. Let me know what you think.
Regards

[TKone7]

@pawelphilipczyk make sure you import

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
// and not 
import { serverSideTranslations } from 'next-i18next'
At least that's how I got the same error that you describe.

[pawelphilipczyk]

Thanks @TKone7 for PR effort and advice!

This actually moves me closer but why is appWithTranslation not suffering from this and I simply 'import { appWithTranslation } from 'next-i18next' - this works. I guess the types definition is better for it or no circular dependency.

The last piece is that I wanted to try and use it with useTranslation hook but I'm getting react-i18next:: i18n.languages were undefined or empty error in the console and keys are rendered instead of translations as expected by this error. I haven't tried withTranslation yet.

I'll wait for PR to be merged (I'll try to run this locally and review if I manage).

[isaachinman]

@pawelphilipczyk The reason we need to separate serverSideTranslations into a separate module has to do with how the NextJs data-fetching functions work – anything you use within them is assumed to be NodeJs code, and actually gets stripped out from client side bundles. It also means we can access modules like fs, etc.

If you are having issues with useTranslation, can you please provide a reproducible repo?

@TKone7 Sorry, I believe we may have duplicated work here. That is completely my fault – apologies for that. I am travelling in the next few days so not online all the time. Can you rebase the PR against latest, and we can sort out any further type changes that need to be merged?

[pawelphilipczyk]

It all works now, few things to keep in mind if anyone else finds this:

• when testing server side translations full page refresh is needed, react fast refresh is not enough
• for useTranslation remember to pass in namespace argument and have the same in serverSideTranslations. Default value for this namespace is "translation" so I guess if file is named .../en/translation.json it's not necessary.
• in case of problems debug/console.log what is loaded by serverSideTranslations and make sure above point is correct
• passing locale to serverSideTranslation as first argument is mandatory

[franzmoro]

Describe the bug

I tried out the new beta release that integrates with Next's new i18n internationalization features. It works all very nicely, thanks for the fast development towards this new release. There is only one thing that holds me back from deploying it Vercel.
When importing {appWithTranslation} or {useTranslation} from 'next-i18next' in any typescript file (e.g. _app.tsx) I get the warning '"../node_modules/next-i18next/types"' has no exported member named 'appWithTranslation'. Did you mean 'AppWithTranslation'?
It seems like there are missing exports in that types.d.ts. While the local server still works, the build process to Vercel fails.

Occurs in next-i18next version

8.0.0-beta.0

Steps to reproduce

Clone the demo repo at https://github.com/isaachinman/next-i18next-vercel and simply change the file extension of pages/_app.js to pages/_app.tsx. The import warning will then be displayed.

Expected behaviour

Correct type definitions.

@isaachinman this issue should be re-opened. Also with version 8.0.0-beta.2, I'm still getting '"../node_modules/next-i18next/types"' has no exported member named 'appWithTranslation'. Did you mean 'AppWithTranslation'?