We're developing a Next.js app using react-i18next for localization. We're using next export (Static HTML Export). The react-i18next library requires initialization code, and I'm not sure where to call that.
(We're not using next-i18next, as that does not work with next export.)
Right now I have the initialization in a separate module (outside of pages/). If I import that module into pages/_app.tsx and run the build script (next build && next export), the build hangs. When I hit Ctrl-C, I get:
Error: setRawMode EIO
The same thing happens if I try to import it from a custom Document.
My current workaround is to import the initialization module in pages/index.tsx - that works, but feels wrong.
The project uses TypeScript and yarn v1, and was scaffolded with create-next-app (in case any of that is relevant).
A Custom App import does appear to be the correct place for client-side initialization code (inferred based on Custom Polyfills).
The issue is that an _app module will execute when next build && next export is called. Asynchronous calls (i18next-http-backend in my case) can cause the build script to hang.
The fix is to wrap the initialization code in:
if (typeof window !== 'undefined') {
// initialization code - will only run on client side
}
Based on https://flaviocopes.com/nextjs-server-client-code/
This does mean that the initialization code won't run for Jest tests either, but react-i18next can be mocked.