i18next-http-backend: Hydration Error on page reload with next 12 + react 18

🐛 Bug Report

When using client side translation in development running next dev on page refresh react throws the following error: Error: Text content does not match server-rendered HTML.

The following errors appear in the console: Text content did not match. Server: "Hello World" Client: "hello_world"

171315322-998f31e7-ca87-4e4d-985d-8a07cf8ea809

Error message running production server next build and next start.

171317005-ad37d45c-14db-47a3-a422-a8c85d6be650

To Reproduce

The bug can be reproduced with the official next example and react & react-dom version 18.1.0.

Expected behavior

No hydration error.

Your Environment

Runtime: Node.js v16.14.0, Chromium v102, Safari v15.5
next-i18next version: 11.0.0
OS: MacOS v12.4

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 15 (1 by maintainers)

Most upvoted comments

A solution for this problem should be included in the readme file, as the example doesn’t work (at least not without errors).

Zerebokep on Jun 15, 2022

I can assure you it’s possible.

isaachinman on Jun 2, 2022

any update?

thienna on Jun 29, 2022

With React 18 you can enable useSuspense option

/**
 * @type {import('i18next').InitOptions & Pick<import('next').NextConfig, 'i18n'>}
 */
module.exports = {
	backend: {
		backendOptions: [
			{ expirationTime: 60 * 60 * 1000 },
			{
				/* loadPath: 'https:// somewhere else' */
			},
		], // 1 hour
		backends: typeof window !== 'undefined' ? [LocalStorageBackend, HttpBackend] : [],
	},
	i18n: {
		defaultLocale: 'en-US',
		locales: ['en-US'],
	},
	serializeConfig: false,
	use: typeof window !== 'undefined' ? [ChainedBackend] : [],
	react: {
		useSuspense: true,
	},
};

isBatak on Jun 20, 2022