I faced with Invalid hook call on react - reactjs

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);

Hooks must be used inside of components because of how they are executed by react. They need to store state against a component. You can read more about info how hooks work in this article from Dan Abramov from the React Team.
You can either use the hook inside of another component:
const App = props => {
const { i18n } = useLingui()
return <Navigation i18n={i18n} {...props} />
}
Or you can make your own HOC (Higher Order Component) that you can use like in the code you posted:
const withI18n = WrappedComponent => props => {
const { i18n } = useLingui()
return <WrappedComponent i18n={i18n} {...props} />
}
The HOC is used like this:
import * as React from "react";
import { withI18n } from "../withI18n";
const Navigation = ({ i18n, locales }) => (...);
export default withI18n(Navigation);

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.

Related

why the custom hook not working properly when I initialise npm?

Yesterday I developed a react custom hook for making our react application's title as dynamic and published in npm. It is my first attempt in npm contribution. So I faced so many errors. And one error not fixed after my well effort. The problem is as below:
The hook using useRef, and useEffect.
The version of react used by the hook is 18.2.0
dependencies in this format:
"dependencies": {
"react": "^18.2.0"
}
I used the hook like this:
import React from "react";
import useTitle from "./hook/react-title-hook";
// import useTitle from "./title";
// import useTitle from "react-dynamic-title";
import { useNavigate } from "react-router-dom";
function App() {
const navigate = useNavigate();
useTitle("Home");
return (
<div className="App">
<header className="App-header">
app
</header>
<h1
onClick={() => {
navigate("/somting");
}}
>
somithing
</h1>
</div>
);
}
export default App;
There are 4 scenarios:
The hook has not a special package.json nor node_modules and it is using what the whole project uses in common. Then, there is no problem. it works smoothly. (It is like second useTitle of the above code)
The hook installed from npm and the version of react in main project is same as the version of hook 18.2.0 , so it would not install the dependencies specially. Then, there is no problem. It works smoothly. (It is like third useTitle of the above code)
The hook has special package.json and node_modules (because, we want to initialise and mention the dependencies when we publish our package). (It is like first useTitle of the above code) Then, the app not render and throw these two errors:
Invalid hook call. Hooks can only be called inside of the body of a function component. (actually the hook is inside of the component)
Uncaught TypeError: Cannot read properties of null (reading 'useRef'). (the first line of hook is useRef, so the error is like this. When I changed and make the useEffect the error is like cannot read properties of null (reading 'useEffect'))
The hook installed into a project that the version of react used by that project is not matching of the version of the hook. Then, the app throw the error as above.
So, this is the problem. The link of the hook is this: react-dynamic-title
How to fix it, Thank you in advance.

Monorepo with custom hooks throws: could not find react-redux context valuel please ensure the component is wrapped in a <Provider>

I have a monorepo React setup built using lerna tool where I have one package that is storing the Redux state and exports createStore method. There is also one custom hook:
import {useSelector} from 'react-redux';
export const useSignInEffect = (effect: EffectCallback) => {
const isSignedIn = useSelector((state: RootState) => state.auth.isSignedIn);
useEffect(() => {
if (isSignedIn) {
return effect();
}
}, [isSignedIn]);
};
Everything else works well, redux store besides this hook where I get the following error. Do I need to do something additional here?
This most commonly means that your build system is pulling in multiple copies of react or react-redux. Make sure that any "library"-type packages are set to use react and react-redux as peer dependencies, not full dependencies, and that only one copy of each is in your app bundle.

SSR with Lerna + React + Styled components

I trying to build project using Lerna and its hoist feature. Everything worked great, before i decided to move ui components from site to packages, for reuse purposes.
I have file structure like this
root
├── node_modules
└── packages
├── admin
├── site
└── ui
where ui is react + styled-components components library, and it used as dependency in site
// site packages.json
...,
"dependencies": {
...,
"#root/ui": "^1.0.0"
}
ui have only one file index.tsx
import React, { FC } from "react";
import styled from "styled-components";
const SharedComponent: FC = () => {
return (
<Wrapper>Hello from SharedComponent</Wrapper>
);
};
const Wrapper= styled.div`
color: red;
`;
export default SharedComponent;
then i use tsc to compile tsx
trying to use it inside site
import React, { FC } from 'react';
import SharedComponentfrom '#root/ui/dist';
const App: FC = () => {
return (
<>
<SharedComponent />
<div>Hello from Site App</div>
</>
);
};
export default App;
So if i start devServer everything is OK.
But when i try to SSR, i got server side error
UnhandledPromiseRejectionWarning: 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
i tried to declare alias property in wepback settings as mentioned here https://github.com/facebook/react/issues/14257#issuecomment-508808246
// site webpack.config.js
module.exports = {
...,
resolve: {
...,
alias: {
react: path.resolve('../../node_modules/react') // path to root node_modules
}
},
}
but error is still in present
Also, if i remove styled-components from ui it works fine. It's seems like the problem is somewhere in styled-components
So, how can i pair lerna + styled-components + react + SSR ?
I managed to get it work. All i need to do is set externals field in webpack config. like this:
externals: [
nodeExternals(),
nodeExternals({ additionalModuleDirs: [path.resolve(__dirname, '../../node_modules')] }),
'express'
]
Try to use dangerouseInnerHtml to solve css probleum. otherwise if you use emtion.css then you can try #emotion/server
try to use next/dynamic or React.lazy to load dynamic
I still confused duplicate React. how to resolve this.

React - Material-UI - Typescript: makeStyles hook gives Invalid Hook Call inside a function component

I really don't understand what am I doing wrong.
I am using the makeStyles hook as described inside the (javascript) documentation, and I am getting this Invalid Hook Call. I am using TypeScript 4.1.2, React 17.0.1 and React Types 17.0.0.
Here is the component code:
import React from 'react';
import { Theme, makeStyles } from '#material-ui/core/styles';
interface Props
{
isVisible: boolean;
}
const useStyles = makeStyles( ( theme: Theme ) => ( {
root: {
background: 'red',
height: 100,
},
} ) );
const Nav: React.FC<Props> = ( props: Props ) =>
{
const { isVisible } = props;
const classes = useStyles( {} );
return (
<div className={classes.root}>
</div>
);
};
export default Nav;
The answer was simpler than I would have thought. It seems that with "react-scripts":"4.0.3", the code works. I don't remember what version of cra I was using previously(I updated it before I checked), but with the latest version looks like it is working.
Here is what I did:
I created a new branch in my git.
I completely deleted the app
I typed in the terminal npm i -g create-react-app
I created a new react app: create-react-app <your file> --template typescript
Finally I added the dependencies and libraries: npm i #material-ui/core #material-ui/icons #material-ui/lab <other-libraries-here> ... #types/material-ui <other-types-here> ...
I changed, as I did before, the tsconfig.json file as the material-ui documentation suggests (I left the strictNullChecks to false as a personal preference)
I ran the start script using npm/yarn start.
I hope this answer helps somebody that encountered this problem! Happy hacking!

Invalid hook calls when calling a graphql-codegen query with typescript + generated core used as a package

I'm using Yarn workspaces with a npm package having the generated code and a mobile package that uses it.
When trying to make a call from an imported query I get an invalid hook call. Using any other hook in that component (i.e. useState) works fine.
My package.json of my mobile package imports:
"#workspace-library/core": "1.0.0",
I have an index.js file at core/src that has:
export * from "./generated/graphql";
export { apollo, useAuth, withAuth };
And I import the queries like this:
import {
useArticlesQuery
} from "#workspace-library/core";
const SidebarArticles: FunctionComponent<{ props: any }> = (props: any) => {
const [test, setTest] = useState("false");
const data = useArticlesQuery({
fetchPolicy: "no-cache",
notifyOnNetworkStatusChange: true,
});
return (
<View>
<Text>Heyhey</Text>
</View>
);
};
I can see the useArticlesQuery in my generated/graphql.jsx, just in case:
export function useArticlesQuery(baseOptions) {
return ApolloReactHooks.useQuery(ArticlesDocument, baseOptions);
}
Environment:
OS: Ubuntu
"#graphql-codegen/cli": "^1.13.1",
"#graphql-codegen/typescript": "^1.13.1",
"#graphql-codegen/typescript-operations": "^1.13.1",
"#graphql-codegen/typescript-react-apollo": "^1.13.1",
Yarn workspaces
Additional context
Error in question:
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
* /home/dogchef/Development/workspace-library/packages/core/node_modules/react/cjs/react.development.js:1589:4 in resolveDispatcher
* /home/dogchef/Development/workspace-library/packages/core/node_modules/react/cjs/react.development.js:1597:29 in useContext
* http://192.168.1.2:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:181621:41 in useBaseQuery
* /home/dogchef/Development/workspace-library/packages/core/node_modules/#apollo/react-hooks/lib/react-hooks.cjs.js:550:18 in useQuery
* http://192.168.1.2:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:197883:37 in useArticlesQuery
* components/SidebarArticles.tsx:10:2 in SidebarArticles
I run into the same issue. Using useQuery is working though.

Resources