femioladeji / react-slideshow

A react component for slideshow supporting slide, fade and zoom
https://react-slideshow-image.netlify.app/
MIT License
362 stars 71 forks source link

TypeError: Cannot read properties of undefined (reading 'Easing') #208

Closed zovanni closed 1 year ago

zovanni commented 1 year ago

This error occurs with react 18.2.0, here: https://github.com/femioladeji/react-slideshow/blob/6542ff54e78fa888830eea5e251b727aa825ac34/src/helpers.tsx#L31


const EASING_METHODS: { [key: string]: TweenEasingFn } = {
    linear: TWEEN.Easing.Linear.None, // <---------
    ease: TWEEN.Easing.Quadratic.InOut,
    'ease-in': TWEEN.Easing.Quadratic.In,
    'ease-out': TWEEN.Easing.Quadratic.Out,
    cubic: TWEEN.Easing.Cubic.InOut,
    'cubic-in': TWEEN.Easing.Cubic.In,
    'cubic-out': TWEEN.Easing.Cubic.Out,
};

Temporary fix I found is adding a resolution in package.json:

"resolutions": {
    "react-slideshow-image/@tweenjs/tween.js": "17.6.0"
 }
femioladeji commented 1 year ago

I'll look into this and get back to you @zovanni

femioladeji commented 1 year ago

@zovanni I just tried to replicate the issue here https://codesandbox.io/s/gallant-dijkstra-pnm5z5?file=/package.json but I couldn't.

What version of the package are you using?

zovanni commented 1 year ago

@femioladeji here are my dependencies:


{
"dependencies": {
    "@egjs/visible": "^2.4.0",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@material-ui/core": "^4.12.4",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.8",
    "@react-google-maps/api": "^2.18.1",
    "axios": "^1.3.2",
    "html-react-parser": "^3.0.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-slideshow-image": "^4.2.0",
    "swiper": "^9.0.5"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.8.3",
    "browser-sync": "^2.27.11",
    "commitizen": "^4.3.0",
    "concurrently": "^7.6.0",
    "consolecolors": "^0.33.2-b",
    "cross-env": "^7.0.3",
    "parcel": "^2.8.3",
    "path": "^0.12.7",
    "pjson": "^1.0.9",
    "process": "^0.11.10",
    "sass": "^1.58.0",
    "sass-loader": "^13.2.0",
    "standard-version": "^9.5.0",
    "style-loader": "^3.3.1",
    "yarn-upgrade-all": "^0.7.2"
  }
}

I use parcel to build js files in a ./dist directory, then i serve that directory at a given port with browsersync to get hmr working. In fact, now that I notice, the error occurs only with parcel serve, not with parcel build. Any idea?

femioladeji commented 1 year ago

@zovanni I'll investigate this over the weekend and get back to you

femioladeji commented 1 year ago

@zovanni this has been fixed now in the latest release v4.2.1. Please let me know if you experience any issue after trying that version

PR #210