AnswerOverflow
Reactiflux
Reactiflux

help-threads-react

Join

Root Question Message

Liil' Boo
Liil' Boo4/23/2022
Hey,
I have no clue whats causes that, I've done : npm install react-spring
I'm correctly using/call the hook following the rules of hooks too
react.development.js:88 Uncaught Invariant Violation: 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

Code breaks when I try to use react-spring features
Liil' Boo
Liil' Boo4/23/2022
import { Card } from '../../Components'; 

import { useTrail, animated } from 'react-spring'; 

 

export function List() { 

 

const trail = useTrail(9, () => ({ 

from: { 

opacity: 0, 

x: 20 

}, 

to: { 

opacity: 9, 

x:0 

} 

})) 

 
return ( 
<h1>LIST</h1> 
) }; 
Liil' Boo
Liil' Boo4/23/2022
As for the "you might have more than 1 copy of react" , I've done a new create-react-app to be sure, I wrote the same code and did npm install react-spring => same error
Message Not Public

Sign In and Join Server To See

4/23/2022
Liil' Boo
Liil' Boo4/23/2022
A Function component, which is used here yet
Liil' Boo
Liil' Boo4/23/2022
As for possibilty 1 , the create-react-app gives me React 18
Message Not Public

Sign In and Join Server To See

4/23/2022
Liil' Boo
Liil' Boo4/23/2022
Yes incoming
Liil' Boo
Liil' Boo4/23/2022
{ 

"name": "react-animations", 

"version": "0.1.0", 

"private": true, 

"dependencies": { 

"@testing-library/jest-dom": "^5.16.4", 

"@testing-library/react": "^13.1.1", 

"@testing-library/user-event": "^13.5.0", 

"react": "^18.0.0", 

"react-dom": "^18.0.0", 

"react-router": "^6.3.0", 

"react-router-dom": "^6.3.0", 

"react-scripts": "5.0.1", 

"react-spring": "^9.4.4", 

"uuid": "^8.3.2", 

"web-vitals": "^2.1.4" 

}, 

"scripts": { 

"start": "react-scripts start", 

"build": "react-scripts build", 

"test": "react-scripts test", 

"eject": "react-scripts eject" 

}, 

"eslintConfig": { 

"extends": [ 

"react-app", 

"react-app/jest" 

] 

}, 

"browserslist": { 

"production": [ 

">0.2%", 

"not dead", 

"not op_mini all" 

], 

"development": [ 

"last 1 chrome version", 

"last 1 firefox version", 

"last 1 safari version" 

] 

} 

} 

 
Liil' Boo
Liil' Boo4/23/2022
Notable adds uuid and React-router-dom V6 but both worked fine before react-spring & react-spring doesn't work even if I remove them
Message Not Public

Sign In and Join Server To See

4/23/2022
Message Not Public

Sign In and Join Server To See

4/23/2022
Liil' Boo
Liil' Boo4/23/2022
I see, so it was a type mismatch / rendering mismatch
Message Not Public

Sign In and Join Server To See

4/23/2022
Message Not Public

Sign In and Join Server To See

4/23/2022
Liil' Boo
Liil' Boo4/23/2022
Sure, but how do I revert ?
Message Not Public

Sign In and Join Server To See

4/23/2022
Message Not Public

Sign In and Join Server To See

4/23/2022
Message Not Public

Sign In and Join Server To See

4/23/2022
Liil' Boo
Liil' Boo4/23/2022
How do pick the version ?
Message Not Public

Sign In and Join Server To See

4/23/2022
Liil' Boo
Liil' Boo4/23/2022
Thanks!
Where did you find the solution please ?
Message Not Public

Sign In and Join Server To See

4/23/2022
Liil' Boo
Liil' Boo4/23/2022
This line

npx create-react-app@17.0.2 my-app
Message Not Public

Sign In and Join Server To See

4/23/2022
Message Not Public

Sign In and Join Server To See

4/23/2022
Message Not Public

Sign In and Join Server To See

4/23/2022
Message Not Public

Sign In and Join Server To See

4/23/2022
Liil' Boo
Liil' Boo4/23/2022
Nice, I'll try it later

Thank you for your time
ContactFrequently Asked QuestionsJoin The DiscordBugs & Feature RequestsTerms & Privacy