Closed Mar-he closed 3 years ago
import i18next-http-backend like this:
const HttpBackend = require('i18next-http-backend/cjs')
Would you please explain why? I have a working minimal example, that imports it without /cjs
. Why would I now import it like this and what is the difference?
I don't know the exact reason, but next.js seems to import certain esm modules in a strange way... with /cjs it forces to load the commonjs export.
I currently have a workaround in place, that explicitly sets the type as backend:
const HttpBackend = require('i18next-http-backend')
HttpBackend.type = 'backend'
I don't know why this works, as the static property on the Backend is set explicitly in the sourcecode of the plugin already, but it convinces next-i18next to successfully load it. I'll try your suggestion tomorrow and report back.
I don't think this will really work... it will just supress the warning...
Oh, it did work - but I like your solution more. Thank you for the clarification and help!
@adrai what a surprise!! Thank you so much!
I've tried copying over my working proof of concept into a real world app and encountered the following error:
You are passing a wrong module! Please check the object you are passing to i18next.use()
next-i18next-config.js:
_app.tsx
employees.tsx
looking at the debug view I can see, that the resources are acutally loaded from the api:
If I remove the backend configuration, it retrieves the key-value-pairs from the locale json file at /public/locales/de/common.json, but with the http backend in place it fires off the error.
Any help is greatly appreciated.
Update it looks like this is due to a custom webpack configuration. If I go with the default
next.config.js
and just doit simply works. But since we need less support, we are still on the old withCSS / withLess hacks and fallback to webpack4:
and with this config, the error can be reliably reproduced.