Skip to content

Getting 'useLayoutEffect' Warning with basic nextjs setup #2294

@SanskarDahiya

Description

@SanskarDahiya

🐛 Bug Report

Getting the below mentioned warning

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at MyApp (webpack-internal:///./src/pages/_app.tsx:164:18)
at I18nextProvider (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/react-i18next@15.0.1_i18next@23.14.0_react-dom@18.2.0_react-native@0.75.2_react@18.2.0/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:11:5)
at AppWithTranslation (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/next-i18next@15.3.1_i18next@23.14.0_next@13.1.6_react-i18next@15.0.1_react@18.2.0/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:82:22)
at StyleRegistry (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/styled-jsx@5.1.1_@babel+core@7.20.12_babel-plugin-macros@3.1.0_react@18.2.0/node_modules/styled-jsx/dist/index/index.js:449:36)
at PathnameContextProviderAdapter (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/next@13.1.6_@babel+core@7.20.12_babel-plugin-macros@3.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/shared/lib/router/adapters.js:60:11)
at AppContainer (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/next@13.1.6_@babel+core@7.20.12_babel-plugin-macros@3.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/render.js:290:29)
at AppContainerWithIsomorphicFiberStructure (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/next@13.1.6_@babel+core@7.20.12_babel-plugin-macros@3.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/render.js:326:57)
at div
at Body (/Users/HelloBaby/Projects/TestInternationalisation/node_modules/.pnpm/next@13.1.6_@babel+core@7.20.12_babel-plugin-macros@3.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/render.js:613:21)

To Reproduce

Versions:
"react": "^18.2.0",
"i18next": "^23.14.0",
"i18next-chained-backend": "^4.6.2",
"i18next-http-backend": "^2.6.1",
"i18next-localstorage-backend": "^4.2.0",
"next-i18next": "^15.3.1",
"react-i18next": "^15.0.1",
"next": "^13.1.6",

A minimal reproducible example.
A codesandbox example or similar
or at least steps to reproduce the behavior:

// Paste your code here

Expected behavior

A clear and concise description of what you expected to happen.

// Paste the expected results here

Your Environment

  • v20.16.0
  • i18next version
  • os: Mac
  • any other relevant information

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions