mui simple carousel library implementing issue - reactjs

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.

Related

Could not find a declaration file for module 'react-slick'

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

Invalid Hook call on using material UI in react

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.

Invalid Hook call when using the react-water-wave

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

how to add reactstrap carousel as child component directly or using async?

I'm using reactstrap in an application, but found some problem with react. The
import CarouselExample from './Sliders/CarouselExample';
render() {
return (
<React.Fragment>
<div id="container">
<CarouselExample />
</div>
</React.Fragment>
);
}
}
line reports a problem and I have no idea with it since I'm a newbie with react-redux. What should I do in my code?
I've grabbed the example code for a carousel from here: https://reactstrap.github.io/components/carousel/
Application built with 16.9.0", "react-dom": "^16.9.0", "react-redux": "^7.1.0", "reactstrap": "^8.0.1","redux": "^4.0.4" and "redux-thunk": "^2.3.0".
The container uses the react component, which is just repeating an image slider div.
Output:
I tried to follow guides and looked up example implementations but could not solve the issue.
Looks like you are missing the bootstrap 4 dependency and CSS.
Install bootstrap 4.3 dependency and import "bootstrap/dist/css/bootstrap.min.css" in your index.js file.
Please see the sandbox for more details:
https://codesandbox.io/s/tender-newton-vty2r
Also beware of using id tags in JSX. It may cause issues when reusing a component. I prefer using refs. Hope this helps.

Tooltip transitions not working using reactstrap

I'm trying to show tooltips using reactstrap. The tooltips appears correctly but without fade-in/out transitions. Using the inspector I noticed that the class fade does not get applied to the tooltip <div>:
I followed the installation instructions on https://www.npmjs.com/package/reactstrap#adding-bootstrap adding these dependencies to my package.json using yarn:
"bootstrap": "^4.1.1",
"react": "^16.7.0",
"react-dom": "^16.3.2",
"react-popper": "^1.3.2",
"react-transition-group": "^2.5.3",
"reactstrap": "^7.1.0",
This is an example component of tooltip usage taken from my app:
import React from 'react';
import nanoid from 'nanoid';
import {UncontrolledTooltip} from 'reactstrap';
export default class ExampleTooltip extends React.PureComponent {
constructor(props) {
super(props);
this._id = `autogeneratedid-${nanoid()}`;
}
render() {
return (
<>
<span id={this._id}>Hover me!</span>
<UncontrolledTooltip target={this._id}>
My tooltip
</UncontrolledTooltip>
</>
);
}
}
I'm including bootstrap using SASS in my index.js file:
import '../styles/style.scss';
And in my style.scss:
#import 'bootstrap/scss/bootstrap.scss';
Am I missing something?
I created a codesandbox on https://codesandbox.io/s/01zm5k5w10
Thank you.
It looks like the problem is not on the CSS/SASS - it's not some class that you are missing or not includes - but its something in you're react/js because it's not applied the "fade show" classes to the wrapper div like on the docs website.
Edit - Its looks like they have some issue on their code - all the real example of reactstrap except for their documentation site - have the same issue with fade effect - for example, your sandbox, a lot of examples from codepen that i cant paste here and more.
when you looking for this issue in GitHub you can see some Discussions about it - I think that there is something on library and not something in your code.
have you check the styles.css in devtool ?
inspect => sources

Resources