I am getting the following error in my react-web application.
*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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.*.
This is my code:
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Dropdown } from 'tabler-react';
import regeneratorRuntime from 'regenerator-runtime';
const LanguageSelector = () => {
const {t, i18n} = useTranslation();
const clicked = (event) => {
i18n.changeLanguage(event.target.value);
};
const clickedEn = () => {
i18n.changeLanguage("en");
};
const clickedTr = () => {
i18n.changeLanguage("tr");
};
return (
<Button.List align={"right"}>
<Dropdown
outline
type="button"
size="sm"
toggle={false}
color="primary"
arrow
icon="globe"
triggerContent={t('selectLanguage')}
itemsObject={[
{
value: "English",
onClick: clickedEn
},
{isDivider: true},
{
value: "Türkçe",
onClick: clickedTr
},
]}
/>
</Button.List>
);
};
export default LanguageSelector;
Here is the package.json file:
{
"name": "smt",
"version": "1.0.0",
"main": "dist/index.js",
"module": "dist/index.es.js",
"jsnext:main": "dist/index.es.js",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"peerDependencies": {
"react": "^15.0.0 || ^16.12.0",
"react-dom": "^15.0.0 || ^16.12.0"
},
"dependencies": {
"js-file-download": "^0.4.8",
"konva": "^7.2.0",
"moment": "^2.24.0",
"react-image-lightbox": "^5.1.1",
"react-konva": "^17.0.0-0",
"react-router-dom": "^5.1.2",
}
}