react 18 support

[nitz-iron]

title

[Karol-Waliszewski]

+1

[timothymalcham]

Npm install breaks because of this (I'm using React 18 in my project):

➜ npm install --save react-lazyload
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project-name@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/react-lazyload
npm ERR!   react-lazyload@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[mengbo-ji]

+1

[Vinh911]

+1

[NickEast12]

+1

[prmichaelsen]

i created my own repo by cloning the package into a local dir

// dir structure:
~/workspace/react-lazyload
~/workspace/my-project

then, i update the ~/workspace/react-lazyload/package.json

i simply add react 18 to the accepted peer dependencies and it works fine.

after updating package.json, run: cd ~/workspace/react-lazyload; npm i

i messed with npm link but i don't think i got it working.

instead i did cd ~/workspace/my-project; npm i ../react-lazyload

i removed eslint dev dependencies since they break the build and they don't really matter to my production app. it's probably not hard to fix the version conflicts but i don't care enough to do it since hard linking the package fulfills my usecase, at the moment.

here is the full diff below:

--- a/package.json
+++ b/package.json
@@ -36,11 +36,6 @@
     "babel-preset-stage-0": "^6.22.0",
     "chai": "^3.5.0",
     "chai-spies": "^0.7.1",
-    "eslint": "^4.18.2",
-    "eslint-config-airbnb": "^14.1.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.10.0",
     "istanbul": "~0.4.5",
     "istanbul-instrumenter-loader": "^0.2.0",
     "karma": "^0.13.22",
@@ -64,7 +59,7 @@
     "webpack-dev-server": "~1.10.1"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
   }
 }

dear maintainers, please fix this if you can

[leaderhun]

+1

[plamber]

Hello @ameerthehacker, first of all. Thank you for your help in this project. Do you think you will consider the PR of @prmichaelsen to have REACT 18 support?

Thank you for your feedback, Patrick

[dmoKruso]

+1

[prijithvrgs90]

Hi @ameerthehacker

I tried to use the react-lazyload in my web app, it works on web (Safari, Chrome, Mozilla) and tab (iPad) view. But when I checked in the mobile responsive view only my first two cards were loaded. The rest of the cards are shown as blank.

Here I added the screenshots for your ref.

"react": "^17.0.0", "react-lazyload": "^3.2.0",

Thanks for your attention. I’m looking forward to your reply

Rgrds, Prijith

[BearCooder]

There is a fork that works with React 18, the link is here: https://github.com/twobin/react-lazyload/pull/387

[keisukekomeda]

One acceptable workaround here.

package.json

{
  "resolutions": {
    "@types/react": "^18.0.0"
  }
}

@types/react-lazyload.d.ts

import "react-lazyload";

declare module "react-lazyload" {
  type children = React.ReactNode;
}

[TakagiSadaaki]

Hi @ameerthehacker @twobin

Would it be possible to publish #387 update on NPM?

Let me know if there's anything I can do to help.

[BearCooder]

Yeah its merged but not on npm available @ameerthehacker

[dertel]

This temporary workaround solved it for me — loading the package directly from the master branch in package.json:

-    "react-lazyload": "^3.2.0",
+    "react-lazyload": "github:twobin/react-lazyload",

[remy727]

Any update on this?

[gurjit03]

@remy727 it should be resolved now. Let us know if you still face any issue.