ERROR in ./node_modules/react-panresponder-web/dist/panresponder.js 7:90-139

[Atul Choudhary]

Module not found error after import TinderCard from 'react-tinder-card'

[Adrian Chrysanthou]

Looks like we all are using the same github
and facing the same issue.

[Göran Svensson]

Had a lot of problems with button touch in mobile web browsers so I tried this demo, and it works with v 1.6.1. Using Mac M1, with npm 8.13.1, node v16.13.2. Trying to implement in my own app now.

[Göran Svensson]

Upgraded the demo with react and react-dom 17.0.2 and got error:

Failed to compile.

./node_modules/react-panresponder-web/dist/panresponder.js
Module not found: Can't resolve 'react-dom/unstable-native-dependencies' in '/Users/moset/react-tinder-card-demo/node_modules/react-panresponder-web/dist'

[Göran Svensson]

Ok, downgraded my app to React 16.13.2 and got it working.

If I click a button in the card in mobile emulation mode I get this error:

index.js:223 Uncaught TypeError: ev.srcElement.className.includes is not a function
at HTMLDivElement. (index.js:223)
(anonymous) @ index.js:223

Line 223:

React.useLayoutEffect(() => {
    element.current.addEventListener('touchstart', ev => {
      if (!ev.srcElement.className.includes('pressable') && ev.cancelable) {
        ev.preventDefault();
      }
    });

[Jakob Unnebäck]

I'm looking into this issue. For now, the pan responder version of tinder-card (1.6.1) only seems to work with older versions of react like in this demo repository. This issue is reported here arqex/react-panresponder-web#1 hopefully, the maintainer will reply with a solution or more info soon. If not I will consider rewriting the code to not require this module.

[Göran Svensson]

Ok, for now i just changed it:

React.useLayoutEffect(() => {
      element.current.addEventListener(('touchstart'), (ev) => {
        if ( ev.cancelable) {
          ev.preventDefault()
        }
      })
    })

and did a npm cache clean --force

But still the same error. Strange.

[Jakob Unnebäck]

@atulchoudhary29 @f00d4tehg0dz @Molnfront This has been fixed by removing the dependency in PR 3DJakob/react-tinder-card#124 and released in 1.6.2 🎉

Running npm install react-tinder-card@1.6.2 will fix this issue.

[Jakob Unnebäck]

The example code has also now been updated to use React 18 and react-tinder-card 1.6.2.

[Atul Choudhary]

@3DJakob Thanks