'I faced with Invalid hook call on react

Here are my scripts that make a navigator for lingui-js. I faced this error on my local: ×

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 ...react-invalid-hook-call for tips about how to debug and fix this problem.

"react": "^16.8.6", "react-dom": "^16.8.6",

My file:

import * as React from "react";
import { useLingui } from "@lingui/react";

const Navigation = ({ i18n, locales }) => (
  <select selected={i18n.locale}>
    {Object.keys(locales).map(locale => (
      <option key={locale} onClick={() => i18n.activate(locale)} value={locale}>
        {locales[locale]}
      </option>
    ))}
  </select>
);

export default useLingui(Navigation);

Solution 1:^[1]

Sometimes it's also because you do this line: npm install react-i18next i18next --save

under your root directory rather than your client/ (considering your structure: root--client root--api

hence, you have 2 react. Just remove react-i18next & i18next under your package.json @root/ & remove your node_modules & package-lock.json files.

Do npm install react-i18next i18next --save under client/ instead.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	shellyyg

'I faced with Invalid hook call on react

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]