I need to setup the react-water-wave module in my react.js app:
https://github.com/homerchen19/react-water-wave
This is the sandbox I have so far:
https://codesandbox.io/embed/old-leaf-iqke2?fontsize=14&hidenavigation=1&theme=dark
The error I'm facing is:
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
The code is:
import Background from "./background.jpeg";
import WaterWave from 'react-water-wave';
import './App.css';
function App() {
let renderFirstold = () => {
return (
<WaterWave
style={{
width: "100%",
height: "100vh",
backgroundSize: "cover",
background: `url(${Background}) no-repeat center center fixed`
}}
dropRadius={20}
perturbance={0.01}
interactive={true}
>
</WaterWave>
)
}
return (
<div className="App">
{renderFirstold()}
</div>
);
}
export default App;
I can transition back to class based component if this is the issue.
Please help me out.
if you look at react-water-wave package.json its dependencies mark as dependency "react": "^16.9.0" meanwhile your sandbox uses react 17.0.2. this way you are facing the first case scenario:
1. You might have mismatching versions of React and the renderer (such as React DOM)
if you downgrade your react and react-dom to 16.9 it works as expected (you would also need to add back the import React from "react" to your files).
Related
I have developed my own website and have errors using react hook.
The errors are like below.
Uncaught 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
And here is my code:
import React from 'react';
import { useSelector } from 'react-redux';
import 'bootstrap/dist/css/bootstrap.min.css';
const ProfileEditing = ({
}) => {
const user = useSelector(state => state.auth);
console.log(user);
return (
<section className="dashboard">
<div className='side'>
<h1 className="large text-primary">Dashboard</h1>
<p className="lead">
</div>
</section>
);
};
export default ProfileEditing;
I try to fix it but doesn't work at all.
Please help me.
I fixed error.
The problem is not because of code but because of node_modules.
I removed package-lock.json and node_modules and reinstall it.
And it works now.
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.
I'm currently migrating from v4 to v5, but it appears #material-ui/core/styles/colorManipulator wasn't carried over or is accessible differently. I tried to find info about it in the docs and migration guide but didn't see anything. Is there an alternative that should be usied to access methods such as darken()? also i'm looking for the alternative to getting styles from things i.e. import { styles as FabStyles } from "#material-ui/core/Fab/Fab"; in v5. I don't see away to access the individual styles now.
darken, lighten, alpha, and other functions accessed via #material-ui/core/styles/colorManipulator in v4 are exported from #mui/material/styles in v5.
Though the migration guide doesn't explicitly mention it, at least some cases of this are handled by the preset-safe codemod (specifically the core-styles-import codemod).
Here's an example usage of darken in v5:
import { darken } from "#mui/material/styles";
export default function App() {
return (
<div>
<h1 style={{ color: "#f00" }}>#f00</h1>
<h1 style={{ color: darken("#f00", 0.25) }}>darken("#f00", 0.25)</h1>
</div>
);
}
As far as the last portion of your question, the styles for each component are no longer exported separately and cannot be leveraged independent of the component.
Hello ,I am new to React and Now I would like to use MATERIAL-UI in my project but I got this error. Help me, please.
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.
I Have Index.js Component:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
ReactDOM.render(
<React.Fragment>
<App />
</React.Fragment>,
document.getElementById("root")
);
registerServiceWorker();
and App.js is the functional Component:
import React from 'react'
import Layout from './Layout/Layout'
function App() {
return <Layout/>
}
export default App
and Styles.js Component from material-ui:
import { makeStyles } from "#material-ui/styles";
const useStyles = makeStyles({
root: {
display: "flex",
height: "100vh",
width: "100%",
},
rightSidebar: {
background: "#BDC3C7",
width:'18%'
},
leftSidebar: {
background: "#BDC3C7",
width:'25%'
},
mainPart: {
background: "#BDC3C7",
flex:1
},
});
export default useStyles;
and Layout.js Component is:
import React from "react";
import useStyles from "./Styles";
function Layout() {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.rightSideba}>right side bar</div>
<div className={classes.mainPart}>main part</div>
<div className={classes.leftSidebar}>left side bar</div>
</div>
);
}
export default Layout;
Thank you
Start simple: What React / React DOM versions do you have?
Then: Does your environment (browser?) start multiple instances of React / React DOM? (esp. any older ones dangling around)
With the arrival of Material-UI#next comes the replacement of LESS-based styling with CSS-to-JS-based styling. However, the component demos on Material-UI's website appear to ignore the creation of props-based-styling. I'm trying to create divs containing various Material-UI components at specific absolute heights on my page, however, the requirement of the stylesheet being predefined outside of the class means that the properties within the stylesheet can't be based on props passed to the component. Am I missing something?
For example:
import React, {Component} from 'react';
import {withStyles, createStyleSheet} from 'material-ui/styles';
import Button from 'material-ui/Button';
const styleSheet = createStyleSheet({
container: {
position: "absolute",
top: /*How can this be dependent upon the props passed to the component?*/,
height: /*How can this be dependent upon the props passed to the component?*/,
}
});
class Foo extends Component {
render() {
let classes = this.props.classes;
return (
<div className={classes.container}>
<Button raised/>
</div>
);
}
}
export default withStyles(styleSheet)(Foo);
The example component displayed above can't have props-dependent styles, because props is not defined when the stylesheet is created. So how do I solve this problem? IS there a solution?
I would strongly advise you check out Styled Compoments. They make styling very simple and even allow you to pass third party components (in your case Material UI components). They also allow you to pass in props like the following:
const Stylesheet = styled.div`
color: ${props => props.primary ? 'white' :
`
<Stylesheet primary>My Div</Stylesheet>
Check out the docs for more details, that was a very simple example, but they are super easy to work with and you can accomplish exactly what you need with them.