TypoError: cannot read the property on undefined (reading 'div') this occur when i install react-tinder-card in my app

Romysylva commented 1 year ago

B626 commented 1 year ago

Same error

fmhc commented 1 year ago

same error here, too

3DJakob commented 1 year ago

Are you building a react-native or react app? It looks like it's trying to import the react code in a native project 🤔 Please try to make a minimal reproducible demo and I can probably find a solution.

thatDeryk commented 1 year ago

using exact version "1.4.5" works for me

daohainam1410 commented 1 year ago

Any update on this error? Been stuck for 3 days now.

a55le commented 1 year ago

Faced with the same error, switching to the previous version helped. What will the fix be waiting for from the author

emlagowski commented 1 year ago

Hi, unfortunately I encountered the same error.

I tried downgrading versions one by one, and going from "react-tinder-card": "^1.6.3" to "react-tinder-card": "1.5.4" helped.

Steps to reproduce:

Create app.

npx create-expo-app test-app
cd test-app
npx expo install react-dom react-native-web @expo/webpack-config react-tinder-card @react-spring/native@9.5.5 @react-spring/web

Add import in App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
+ import TinderCard from 'react-tinder-card'

Run web application
```
npm run web
```

Error in console

Uncaught TypeError: Cannot read properties of undefined (reading 'div')
    at ./node_modules/react-tinder-card/index.js (index.js:82:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./App.js (bundle.js:19:75)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/expo/AppEntry.js (styleToBarStyle.web.ts:19:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:6:1
    at startup:6:1

BTW, great lib, thank you for your work 👍

emlagowski commented 1 year ago

is there any chance you can give a hint what is breaking here @3DJakob ? I can try to make a PR for this, but currently I don't know how to fix it 😞

I see that comment in your code

node_modules/react-tinder-card/index.native.js:81

// must be created outside of the TinderCard forwardRef
const AnimatedDiv = animated.div

and this throws an error ("Uncaught TypeError: Cannot read properties of undefined (reading 'div')") on web, but I don't understand why it is undefined.

Aminetoumi0 commented 1 year ago

same issue

tromma commented 1 year ago

I changed the version of @react-spring/web to 9.5.5, and I have no more the issue

srose0040 commented 11 months ago

I changed the version of @react-spring/web to 9.5.5, and I have no more the issue

Same

suigingin commented 10 months ago

I also encountered the same error. It is tentative, downgrade to "react-tinder-card": "1.5.4" or @react-spring/web to 9.5.5 solved this problem. thanks guys.

jlujan2 commented 8 months ago

I got this error when I run it in Docker, but when I run it in my local machines works fine. Anyone had this issue. I am using node 20.11.0

samu975 commented 7 months ago

Hello. I solved this error with the following steps:

Delete node modules and package-lock.json.
Erase react-tinder-card and @react-spring/web from package.json
Clean npm caché with the followin command npm cache clean --force
Install all the dependencies without react-tinder-card and @react-spring/web
Finally, install react-tinder-card and @react-spring/web in that order.

PD not related to this issue: @3DJakob It will be really useful add an onclick function in the interface Props in the index.d.ts. Really awesome lib BTW

thomyhabesha commented 4 months ago

This fixed for me. was stuck for 2 hours and then I did:

npm uninstall @react-spring/web npm uninstall react-tinder-card

then: npm install --save react-tinder-card
npm install --save @react-spring/web@9.5.5

3DJakob / react-tinder-card

TypoError: cannot read the property on undefined (reading 'div') this occur when i install react-tinder-card in my app #155