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

[Romysylva]

Uncaught runtime errors:
×
ERROR
Cannot read properties of undefined (reading 'div')
TypeError: Cannot read properties of undefined (reading 'div')
at ./node_modules/react-tinder-card/index.js (http://localhost:3000/static/js/bundle.js:43994:30)
at options.factory (http://localhost:3000/static/js/bundle.js:53659:31)
at webpack_require (http://localhost:3000/static/js/bundle.js:53104:33)
at fn (http://localhost:3000/static/js/bundle.js:53316:21)
at ./src/components/datingCards/DatingCards.jsx (http://localhost:3000/static/js/bundle.js:102:75)
at options.factory (http://localhost:3000/static/js/bundle.js:53659:31)
at webpack_require (http://localhost:3000/static/js/bundle.js:53104:33)
at fn (http://localhost:3000/static/js/bundle.js:53316:21)
at ./src/App.js (http://localhost:3000/static/js/bundle.js:16:93)
at options.factory (http://localhost:3000/static/js/bundle.js:53659:31)

[B626]

Same error

[fmhc]

same error here, too

[3DJakob]

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]

using exact version "1.4.5" works for me

[nhd36]

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

[a55le]

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

[emlagowski]

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:

1. 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/[email protected] @react-spring/web

2. Add import in App.js

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

3. 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]

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]

same issue

[tromma]

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

[srose0040]

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

Same

[suigingin]

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]

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]

Hello. I solved this error with the following steps:

1. Delete node modules and package-lock.json.
2. Erase react-tinder-card and @react-spring/web from package.json
3. Clean npm caché with the followin command npm cache clean --force
4. Install all the dependencies without react-tinder-card and @react-spring/web
5. 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]

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/[email protected]