Invalid hook call with next-i18nnext

[eakarpov]

Describe the bug

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Occurs in next-i18next version

3.0.1

Steps to reproduce

Without withTranslation wrapper everything is ok

const App = () => <MainLayout>
    <div>asdasd</div>
</MainLayout>;

export default App;

As soon as we add withTranslation wrapper, application crashes with React error above

const App = () => <MainLayout>
    <div>asdasd</div>
</MainLayout>;

export default I18n.withTranslation()(App);

Expected behaviour

Render without problems

OS (please complete the following information)

• Device: Linux Ubuntu 18.04
• Browser: Chrome 77.0.3865.75

[isaachinman]

Please provide a full reproducible example. Unfortunately the snippets above are not enough.

[eakarpov]

I did not get the error in a small example, though, the translation function does not work here - https://codesandbox.io/s/nextjs-djhgs
And there is an error in console

---

In my example, there is also such a stacktrace.

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/home/eakarpov/Documents/slovinar/ui/node_modules/react/cjs/react.development.js:1590:13)
    at useContext (/home/eakarpov/Documents/slovinar/ui/node_modules/react/cjs/react.development.js:1598:20)
    at useTranslation (/home/eakarpov/Documents/slovinar/ui/.next/server/static/development/pages/index.js:15562:48)
    at withI18nextTranslation(App) (/home/eakarpov/Documents/slovinar/ui/.next/server/static/development/pages/index.js:15862:65)
    at processChild (/home/eakarpov/Documents/slovinar/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:3204:14)
    at resolve (/home/eakarpov/Documents/slovinar/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:3124:5)
    at ReactDOMServerRenderer.render (/home/eakarpov/Documents/slovinar/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:3598:22)
    at ReactDOMServerRenderer.read (/home/eakarpov/Documents/slovinar/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:3536:29)
    at renderToString (/home/eakarpov/Documents/slovinar/server/node_modules/react-dom/cjs/react-dom-server.node.development.js:4245:27)
    at render (/home/eakarpov/Documents/slovinar/server/node_modules/next/dist/next-server/server/render.js:82:16)
    at Object.renderPage (/home/eakarpov/Documents/slovinar/server/node_modules/next/dist/next-server/server/render.js:323:20)
    at /home/eakarpov/Documents/slovinar/ui/.next/server/static/development/pages/_document.js:4358:21
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/eakarpov/Documents/slovinar/ui/.next/server/static/development/pages/_document.js:239:24)
    at _next (/home/eakarpov/Documents/slovinar/ui/.next/server/static/development/pages/_document.js:261:9)
    at /home/eakarpov/Documents/slovinar/ui/.next/server/static/development/pages/_document.js:268:7

[eakarpov]

Here are network screemshots without and with next-i18next enabled (see unloaded scripts)

[eakarpov]

@isaachinman Here is the link to the project where this error is replicated.
https://github.com/SlavDom/slovinar

[isaachinman]

I do not understand the setup of that linked repository, but it certainly is not a minimal reproducible example. Can you try to isolate the issue here?

[HarisSpahijaPon]

@eakarpov next-i18next HOC withTranslation is only useable in Classes. The example you have provided is exporting a functional component.

@isaachinman I think what he means is that there is no way to make use of the next-i18next withTranslation HOC on a functional component. But I am unsure of this since I have not tested it. Issue can be closed until there is a replicateable example of the error

[eakarpov]

@HarisSpahijaPon hmm, that is a first constructive answer, thank you. I will try whether it works in class. I supposed there was no difference if the component is functional or not.
There will be no support for Functional components in this library, won't it?

[isaachinman]

@eakarpov To start a constructive discussion we need a minimal reproducible example.

Support for HOC on functional components on _app is tracked with #615.

The withTranslation HOC comes directly from react-i18next.

[isaachinman]

Functional components are fully supported by this package.

[isaachinman]

@eakarpov Any update?

[martpie]

This is likely an upstream bug vercel/next.js#9022

[isaachinman]

If anyone can reproduce this after upgrading to the latest NextJs version, please let me know and I'll reopen.