Skip to content

chore(deps): bump react-lazyload from 2.6.5 to 3.2.1 #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dependabot wants to merge 1 commit into
base: add-eventstore-group-parameter
Choose a base branch
from
Open

chore(deps): bump react-lazyload from 2.6.5 to 3.2.1 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
"react-document-title": "2.0.3",
"react-dom": "17.0.2",
"react-keydown": "^1.9.7",
"react-lazyload": "^2.3.0",
"react-lazyload": "^3.2.1",

@coderabbitai coderabbitai Bot Nov 18, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 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:

  1. Whether the codebase is compatible with the new API.
  2. Whether any component imports, props, or usages need updating.
  3. 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=jsx

Length 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=js

Length 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:

🌐 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=js

Length 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 -20

Length 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 -50

Length 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 -20

Length 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 -20

Length 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.jsx

Length of output: 963

🏁 Script executed:

#!/bin/bash
# Examine the actual LazyLoad component implementation
cat ./static/app/components/lazyLoad.tsx

Length 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=js

Length of output: 0

🏁 Script executed:

#!/bin/bash
# Check if react-lazyload is used in any TypeScript/TSX files
rg -n "react-lazyload" static/app

Length 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 -80

Length 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 -C3

Length 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.

"react-mentions": "4.1.1",
"react-popper": "^1.3.11",
"react-router": "3.2.0",
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12493,10 +12493,10 @@ react-keydown@^1.9.7:
dependencies:
core-js "^3.1.2"

react-lazyload@^2.3.0:
version "2.6.5"
resolved "https://registry.yarnpkg.com/react-lazyload/-/react-lazyload-2.6.5.tgz#7a5ac001f0f8aeddc10c30e4ce318c10f13aa723"
integrity sha512-C/juO9l7dGS7jEARBLjM3oG7F1lL5bqajz/55sk3GFc0Ippd9vnSkdRxdiaE6gf5si3YxIow8dSJ+YuB2D/3vg==
react-lazyload@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/react-lazyload/-/react-lazyload-3.2.1.tgz#320087741ee6aaf693369b67690799423ed4d7a3"
integrity sha512-oDLlLOI/rRLY0fUh/HYFCy4CqCe7zdJXv6oTl2pC30tN3ezWxvwcdHYfD/ZkrGOMOOT5pO7hNLSvg7WsmAij1w==

react-lifecycles-compat@^3.0.4:
version "3.0.4"
Expand Down