liil'boo
liil'boo3y ago

Liil' Boo – 14-20 Apr 23

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
18 Replies
liil'boo
liil'booOP3y ago
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>
) }; 
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>
) }; 
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
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
liil'boo
liil'booOP3y ago
A Function component, which is used here yet
As for possibilty 1 , the create-react-app gives me React 18
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
liil'boo
liil'booOP3y ago
Yes incoming
{

"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"

]

}

}

 
{

"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"

]

}

}

 
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
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
liil'boo
liil'booOP3y ago
I see, so it was a type mismatch / rendering mismatch
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
liil'boo
liil'booOP3y ago
Sure, but how do I revert ?
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
liil'boo
liil'booOP3y ago
How do pick the version ?
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
liil'boo
liil'booOP3y ago
Thanks! Where did you find the solution please ?
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
liil'boo
liil'booOP3y ago
This line npx create-react-app@17.0.2 my-app
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
liil'boo
liil'booOP3y ago
Nice, I'll try it later Thank you for your time
reactibot
reactibot3y ago
This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/967429743114858546