when I tried to use matrial UI textfield I got the invalid hook call error. how to fix it ?
import './Login.css';
import TextField from "#material-ui/core/TextField";
const Login = () => {
return(
<div className="login">
<div className="loginContainer">
//***** <TextField /> *****//
</div>
</div>
);
}
export default Login;
When I remove the TextField Component it works fine. when I add it it says
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
I have the react and react-dom same versions
"react": "^17.0.2",
"react-dom": "^17.0.2"
but still I got the error, can anyone give me the reason why it is so ?
I have react and react-dom versions 17.0.2 in package.json before
Then I changed it to
{
"#material-ui/core": "latest",
"react": "latest",
"react-dom": "latest"
}
and then I executed the "npm install" It installed the latest versions of all the dependencies mentioned above. This fixed the issue.
Related
Here is a short background...
I migrated react from v17 to v18 successfully. App is running without errors.
After that I upgraded react-scripts from v4 to v5. There are no errors in the terminal but when i run the app, it's crashed (white screen). There is a strange error in console Uncaught TypeError: Cannot read properties of undefined (reading 'default')
Here is a screenshoot of the actual error:
This is the file where the above error is thrown:
import { Outlet } from 'react-router-dom';
import DashboardNavbar from '../DashboardNavbar';
import DashboardSidebar from '../DashboardSidebar';
import { StyledRoot, StyledContainer } from './DashboardLayout.styles';
const DashboardLayout = () => (
<StyledRoot>
<DashboardNavbar />
<DashboardSidebar />
<StyledContainer>
<Outlet />
</StyledContainer>
</StyledRoot>
);
export default DashboardLayout;
Dependencies from package.json
{
...
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"typescript": "^4.8.4",
...
}
Do you have any idea why is this happening?
Implementing a simple carousel using react material-ui carousel the Invalid hook call error rises.
Error occurred:
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.
I simplified the documentation starter code as much as I could, but the error still remains.
Seems the dependency packages version looks correct and error just rise from the code I had no idea how to fix that.
My code:
On stackblitz
import * as React from 'react';
import { Paper, Typography, Button } from '#mui/material';
import Carousel from 'react-material-ui-carousel';
const Demo = (props) => (
<Carousel>
{/* Change above line to <> and it work, maybe some version conflicts?? */}
<Paper>
<Typography>First Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
<Paper>
<Typography>Second Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
<Paper>
<Typography>Third Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
</Carousel>
);
export default Demo;
Looks like they havn't updated the package yet to support react 18 https://github.com/Learus/react-material-ui-carousel/issues/174.
If you're using npm add:
"overrides": {
"react-material-ui-carousel": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
to package.json. Or if you're using yarn add:
"resolutions": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
I also had to delete both my package-lock.json and node_modules then run npm install but maybe try without first.
import Slider from "react-slick";
i have imported react slick also installed it.
import React, { useEffect, useRef,useState } from 'react';
import Slider from "react-slick";
import '../Styles/Work.css' ;
const Work = () => {
return (
<div style={{height:"100vh"}} ref={ref} className='work-container' id="work">
<h1 ref={title} className='work-title'>
MY WORKS
{/* {inView && navigate('/#about')} */}
</h1>
</div>
)
}
export default Work
packagelock file
"react-scripts": "5.0.0",
"react-slick": "^0.28.1",
"react-slick-carousel": "^0.14.9",
it's displays in my package-lock too. what's the issue here?? i am using react with typescript
You have to install the types for 'react-slick' #types/react-slick . Make sure its on your package.json as well as r#types/react
16.8.2
#types/react-dom
As you use typescript, you have to install it's type by following:
npm install --save #types/react-slick
Currently I'm using react-markdown as my markdown component in my react project. Along with this I'm also using rehype-raw and remark-gfm. Whenever I run the project I get the following error:
The following is my package.json:
"dependencies": {
"next": "11.1.2",
"next-images": "^1.8.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-markdown": "^7.0.1",
"rehype-raw": "^6.1.0",
"remark-gfm": "^2.0.0",
},
and my component:
import ReactMarkdown from "react-markdown";
import styles from "../styles/Home.module.css";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
export default function Home({ posts }) {
return (
<main className={styles.main}>
{posts &&
posts.map((image) => (
<div style={{ height: "100%" }}>
<ReactMarkdown
children={image.Content}
rehypePlugins={[rehypeRaw]}
/>
</div>
))}
</main>
);
}
Error shown in logs:
I experienced similar error too, then I've found this solution:
https://github.com/vercel/next.js/issues/25454#issuecomment-903513941
ReactMarkdown is an ESM module which means it cannot be required but rather imported. If you are actually importing in your code, it can be, that the transpiler (e.g.: Babel) changes this, hence the error. So this can be a possible cause of the error.
What you can do to solve this (also described in the issue commit by others):
npm i next-transpile-modules
In next.config.js do the following:
const withTM = require('next-transpile-modules')(['react-markdown']);
module.exports = withTM({
...restOfYourConfig
})
Import ReactMarkdown like this: import ReactMarkdown from 'react-markdown/react-markdown.min';
Other sources:
https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
https://nextjs.org/docs/messages/import-esm-externals
https://www.npmjs.com/package/next-transpile-modules
I have this simple code to show the text field:
I get the error
Error in /turbo_modules/react#16.13.0/cjs/react.development.js (1465:13)
Invalid hook call.
The code is at this link https://stackblitz.com/edit/react-6dgvfj?file=UserForm.js
import React, { Component } from 'react';
import compose from 'recompose/compose';
import { connect } from 'react-redux';
import TextField from '#material-ui/core/TextField';
const UserForm = props => {
return (
<div>
This is userform component.
<TextField id="standard-basic" label="Standard" />
</div>
);
}
export default UserForm;
react and react-dom packages always get released in pair. So they are bound to be of same release, to work together. In your case, react was of 16.12.0 and react-dom of 16.13.0
Your package.json
"dependencies": {
"#material-ui/core": "^4.9.5",
"#types/react": "^16.8.6",
"react": "^16.13.0",
"react-dom": "16.12.0"
},
change it to
"react": "16.13.0",
"react-dom": "16.13.0"