Unable to preventDefault inside passive event listener invocation

[nareg23]

Every time i click on the next /previous story getting this error in the browser console.

`{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-insta-stories": "^2.4.2"
  },
  "devDependencies": {
    "@types/node": "18.0.0",
    "@types/react": "18.0.14",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "eslint": "8.18.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.3",
    "typescript": "4.7.4"
  }
}
`

[ashmuradyann]

I have the same error and I can't solve that yet.

[opexchanger]

Happening the same thing with me. Using NextJs

[sheunglys]

same error, any update? using react

[sgm17]

I found a workaround which is to listen to the containers used by the library directly from the DOM. Here you have what I have done. It is important to have the defaultPrevent property of the Stories object disabled.

useEffect(() => {
        const panel = document.querySelectorAll('#root > div > div > div > div:nth-child(3) > div')

        if (panel === null) return

        const panelLeft = panel.item(0)
        const panelRight = panel.item(1)

        if (!isListening) {
            isListening = true
        } else {
            return
        }

        panelLeft.addEventListener('click', (e) => handleClick(e, ClickEnum.left))
        panelRight.addEventListener('click', (e) => handleClick(e, ClickEnum.right))

        return () => {
            panelLeft.removeEventListener('click', (e) => handleClick(e, ClickEnum.left))
            panelRight.removeEventListener('click', (e) => handleClick(e, ClickEnum.right))
        }
    }, [])

[MarufSharifi]

Didn't work for me, could you share a complete snippet of code

[bgdntsv]

Didn't work for me, could you share a complete snippet of code

Using react v18.2.0

[quedicesebas]

¿Solutions? ¿Alternatives?

[Ekkaterinka]

Hello, maybe my solution will help someone:

useEffect(() => {
    document.body.addEventListener(
        'touchstart',
        function (e) {
            e.stopPropagation();
        },
        {capture: true, passive: false}
    );
}, []);