chore(deps): bump react-lazyload from 2.6.5 to 3.2.1#5
Conversation
Bumps [react-lazyload](https://github.com/jasonslyvia/react-lazyload) from 2.6.5 to 3.2.1. - [Commits](https://github.com/jasonslyvia/react-lazyload/commits) --- updated-dependencies: - dependency-name: react-lazyload dependency-version: 3.2.1 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>
dependabot
Bot
added
dependencies
|
@coderabbitai review |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
WalkthroughUpdates the Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
Pre-merge checks✅ Passed checks (3 passed)
Note Free review on us!CodeRabbit is offering free reviews until Wed Dec 17 2025 to showcase some of the refinements we've made. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (1)
package.json(1 hunks)
| "react-dom": "17.0.2", | ||
| "react-keydown": "^1.9.7", | ||
| "react-lazyload": "^2.3.0", | ||
| "react-lazyload": "^3.2.1", |
There was a problem hiding this comment.
🧩 Analysis chain
Verify major version compatibility for react-lazyload.
This is a major version bump (2.x → 3.x), which typically introduces breaking changes. Since there are no corresponding code changes visible, ensure the codebase is compatible with react-lazyload 3.2.1's API and that all usages have been updated or remain compatible.
Please verify the following:
Additionally, search for the latest documentation on react-lazyload 3.2.1 to identify any breaking changes:
After reviewing the changelog, please confirm:
- Whether the codebase is compatible with the new API.
- Whether any component imports, props, or usages need updating.
- Whether the new version is tested with React 17.0.2 (the version pinned in this project).
🏁 Script executed:
#!/bin/bash
# Check how react-lazyload is used in the codebase
rg -n "react-lazyload" --type=ts --type=tsx --type=js --type=jsxLength of output: 27
🌐 Web query:
react-lazyload 3.2.1 breaking changes changelog
💡 Result:
I couldn't find any breaking-change notes for react-lazyload v3.2.1 — the npm package (v3.2.1) and package metadata list the release but the repo's CHANGELOG doesn't show a v3.2.1 breaking-change entry. Sources: npm package page and package metadata. [1][2]
Sources
[1] react-lazyload on npm (version 3.2.1).
[2] react-lazyload package metadata / registry (shows v3.2.1 published).
🏁 Script executed:
#!/bin/bash
# Search for react-lazyload usage with correct ripgrep syntax
rg -n "react-lazyload" --type=jsLength of output: 56
🌐 Web query:
react-lazyload v3 release notes github changelog
💡 Result:
You can find v3 release notes / changelog for react-lazyload in these places:
- npm package page (links to the repository; notes about v3 and upgrade): (npmjs.com)
- Third‑party changelog summary showing v3.x release dates (latest v3.0.11 — Feb 17, 2017): (react.libhunt.com)
If you want the authoritative GitHub changelog/releases, open the repository github.com/jasonslyvia/react-lazyload and check its Releases and CHANGELOG.md there (the npm page above includes the repo link). (npmjs.com)
Citations:
- 1: https://www.npmjs.com/package/react-lazyload?utm_source=openai
- 2: https://react.libhunt.com/react-lazy-load-changelog?utm_source=openai
- 3: https://www.npmjs.com/package/react-lazyload?utm_source=openai
🌐 Web query:
react-lazyload 3.0 API changes migration from 2.x
💡 Result:
Short summary of the breaking API/behaviour changes when migrating react-lazyload 2.x → 3.0 and how to adapt:
-
findDOMNode removed — component now uses a React ref to avoid the findDOMNode warning. This required adding an extra wrapper DOM node around your lazy-loaded children. If your layout, CSS selectors or snapshot tests relied on the previous DOM shape, update them to account for the additional wrapper. [1][2]
-
Possible test breaks — adjust Jest/Enzyme snapshots or DOM queries (e.g., change selectors or unwrap the extra div in snapshots) because the extra wrapper changes element structure. [1][2]
-
Styling adjustments — if you targeted the wrapped element with CSS, either apply styles to the new wrapper, change selectors, or move styling into the child component. The README points to customization notes for the extra div. [1][3]
Migration checklist
- Inspect components using and update any code that depended on the previous DOM node (CSS selectors, parent-child assumptions, snapshots).
- Update tests to match new DOM (or strip wrappers in snapshots).
- If you used findDOMNode directly elsewhere expecting react-lazyload behaviour, refactor to use refs.
- Review the package README/release notes for any minor usage changes. [1][2]
Sources
[1] react-lazyload (npm README) — notes on 3.0.0 ref change and extra wrapper.
[2] Project README / Github mirrors (react-lazyload docs mentioning extra div and findDOMNode fix).
[3] Community docs / guides referencing the wrapper and styling implications.
If you want, I can extract exact examples from your code (before/after) and produce the minimal changes to make it work with 3.0.
🏁 Script executed:
#!/bin/bash
# Search for LazyLoad component imports and usage
rg -n "LazyLoad|from.*react-lazyload" --type=jsLength of output: 1424
🏁 Script executed:
#!/bin/bash
# Examine the test setup mock to understand current usage
cat tests/js/setup.js | sed -n '85,95p'Length of output: 339
🌐 Web query:
react-lazyload 3.2.1 npm React 17 compatibility
💡 Result:
Short answer: Yes — react-lazyload@3.2.1 is usable with React 17.
Evidence:
- The package on npm (v3.2.1) does not declare a React peerDependency that would block React 17 and the package is published as compatible with modern React versions. [1]
- Community usage and package listings show v3.2.1 in wide use with React 16/17 projects (no open incompatibility reported for React 17). [2]
If you run into peer-dependency errors during npm install, try installing with --legacy-peer-deps (or upgrade/downgrade the specific conflicting package) and run your app/tests — most users report it works at runtime. [1][2]
Sources:
[1] react-lazyload package page — npm (v3.2.1).
[2] jsDelivr / package metadata and community references for react-lazyload v3.2.1.
🏁 Script executed:
#!/bin/bash
# Find and inspect the custom LazyLoad component
fd -e js -e jsx "lazyLoad\." | head -20Length of output: 81
🏁 Script executed:
#!/bin/bash
# Search for the actual LazyLoad component source in app/components
rg -n "export.*LazyLoad|react-lazyload" --type=js -A3 -B3 | head -50Length of output: 738
🏁 Script executed:
#!/bin/bash
# Find lazyLoad in app/components with broader search
find . -path "*/app/components*" -name "*lazyLoad*" -o -path "*/app/components*" -name "*lazy*" 2>/dev/null | head -20Length of output: 36
🏁 Script executed:
#!/bin/bash
# Search for LazyLoad imports to trace the source
rg -n "import.*LazyLoad.*from" --type=js --type=jsx | head -20Length of output: 27
🏁 Script executed:
#!/bin/bash
# Get full context of the import in lazyLoad.spec.jsx
head -30 tests/js/spec/components/lazyLoad.spec.jsxLength of output: 963
🏁 Script executed:
#!/bin/bash
# Examine the actual LazyLoad component implementation
cat ./static/app/components/lazyLoad.tsxLength of output: 3973
🏁 Script executed:
#!/bin/bash
# Search for all imports of react-lazyload (excluding the mock)
rg -n "import.*from.*react-lazyload|require.*react-lazyload" --type=js | grep -v "jest.mock"Length of output: 0
🏁 Script executed:
#!/bin/bash
# Also search for any usage of LazyLoad component from react-lazyload (not custom)
rg -n "from 'react-lazyload'|from \"react-lazyload\"" --type=jsLength of output: 0
🏁 Script executed:
#!/bin/bash
# Check if react-lazyload is used in any TypeScript/TSX files
rg -n "react-lazyload" static/appLength of output: 564
🏁 Script executed:
#!/bin/bash
# Examine how LazyLoad is used in one of the main components
cat static/app/components/stream/groupChart.tsx | head -80Length of output: 1979
🏁 Script executed:
#!/bin/bash
# Check if there are snapshots or tests that might be affected by DOM changes
rg -n "snapshot|LazyLoad" tests/js/spec/views/projectsDashboard --type=js -C3Length of output: 733
Update Jest mock and verify component compatibility with react-lazyload v3 breaking changes.
react-lazyload v3 introduces a breaking change: an extra wrapper <div> is added around children (replacing the deprecated findDOMNode approach). The codebase actively uses this package in 5 production files (groupChart, healthStatsChart, projectsDashboard, projectStatsGraph, releases list), but the Jest mock at tests/js/setup.js:86-88 is outdated—it returns children directly without the wrapper, which no longer matches v3's actual behavior.
Required actions:
- Update the Jest mock to include the wrapper div:
const LazyLoadMock = ({children}) => <div>{children}</div>; - Verify that the extra wrapper div doesn't break styling or layout in components using
<LazyLoad>(check CSS rules targeting wrapped elements) - Review and update any DOM-structure-dependent tests or snapshots to account for the wrapper div
- Test with React 17.0.2 to confirm no peer-dependency conflicts
🤖 Prompt for AI Agents
In package.json around line 111, the project upgraded react-lazyload to v3 which
wraps children in an extra div but the Jest mock at tests/js/setup.js lines
~86-88 still returns children directly; update that mock to return a wrapper div
around children, run and update any snapshots or DOM-structure-dependent tests
that expect the previous structure, inspect and adjust CSS selectors or
component styling that assume no extra wrapper (ensure rules target the new
nested structure or use more specific selectors), and run the test suite using
React 17.0.2 to confirm no peer-dependency conflicts.
1 participant
Bumps react-lazyload from 2.6.5 to 3.2.1.
Commits
Maintainer changes
This version was pushed to npm by gurjit, a new releaser for react-lazyload since your current version.
You can trigger a rebase of this PR by commenting
@dependabot rebase.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebasewill rebase this PR@dependabot recreatewill recreate this PR, overwriting any edits that have been made to it@dependabot mergewill merge this PR after your CI passes on it@dependabot squash and mergewill squash and merge this PR after your CI passes on it@dependabot cancel mergewill cancel a previously requested merge and block automerging@dependabot reopenwill reopen this PR if it is closed@dependabot closewill close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot show <dependency name> ignore conditionswill show all of the ignore conditions of the specified dependency@dependabot ignore this major versionwill close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor versionwill close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependencywill close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Summary by CodeRabbit