Upgrade Gatsby from 5.13.3 to 5.16.0 with React 18.3.1 by kennethkalmer · Pull Request #3184 · ably/docs

kennethkalmer · 2026-02-07T00:06:22Z

Summary

This PR upgrades the Ably documentation site from Gatsby 5.13.3 to 5.16.0, including all related ecosystem packages and React 18.3.1. The upgrade brings security fixes, bug improvements, and maintains compatibility with the latest plugin ecosystem.

Key changes:

Gatsby 5.13.3 → 5.16.0 (all plugins updated to match)
React 18.2.0 → 18.3.1
@ably/ui 17.11.4 → 17.13.2
Added webpack configuration for Node.js built-in module handling
Added Jest polyfills for MSW 2.x compatibility

Commits

Upgrade @ably/ui from 17.11.4 to 17.13.2
- Removes obsolete CookieMessage CSS import (component no longer exists)
Upgrade Gatsby from 5.13.3 to 5.16.0 with React 18.3.1
- All 19 gatsby-* plugins updated to 5.16.0
- babel-preset-gatsby: 3.3.0 → 3.16.0
- React packages: 18.2.0 → 18.3.1
- Added webpack@5 as dev dependency
- Added React resolutions to prevent duplicate copies from Radix UI nested dependencies
- Modified build:compress script with --skipLibCheck for TypeScript 4.6.3 compatibility
Add configuration for Gatsby 5.16.0 and MSW 2.x compatibility
- Webpack config to handle node: protocol imports (borrowed from ably/voltaire)
- Jest polyfills for BroadcastChannel and Web Streams API
- Jest config to transform until-async package

Why This Upgrade

Security: Gatsby 5.16.0 includes fixes for qs vulnerability in body-parser
Compatibility: Maintains compatibility with latest plugin ecosystem
Best practices: Keep dependencies current for bug fixes and performance improvements
Proven approach: Follows same pattern as ably/voltaire PR AWS persistence first draft #1437

Test Results

✅ 23 test suites passed (1 skipped)
✅ 184 tests passed (1 skipped)
✅ 4 snapshots passed
✅ Build time: ~155 seconds
✅ All artifacts generated: 272 pages, 318 redirects, 582 compressed files

Test Plan

All Jest tests pass
ESLint passes (8 pre-existing warnings)
Production build succeeds
Build artifacts verified (redirects, compression, llms.txt)
CI pipeline passes
Review app deployment successful
Manual verification of key pages (Chat, Spaces, LiveObjects, etc.)

🤖 Generated with Claude Code

Summary by CodeRabbit

Chores
- Upgraded Gatsby and React to latest stable versions for improved performance, stability, and compatibility
- Updated build tooling, webpack configuration, and Jest test environment with enhanced module handling
- Refactored asset compression architecture for better modularity
- Optimized CSS footprint by removing unused component styles

coderabbitai · 2026-02-07T00:06:35Z

Walkthrough

The pull request modernizes the Gatsby build and development environment by refactoring asset compression to use an external worker file, introducing webpack configuration support via a new Gatsby Node API, updating core dependencies (Gatsby, React, and related ecosystem packages), adding MSW 2.x polyfills for testing, adjusting Jest configuration, and removing an unused CSS import.

Changes

Cohort / File(s)	Summary
Worker Refactoring `data/onPostBuild/compressAssets.js`	Removed inline worker implementation and dependencies (worker_threads, fs/promises, `@gfx/zopfli`). Updated Piscina pool to reference external compressAssetsWorker.js, simplifying the main file by delegating compression work.
Webpack Configuration `gatsby-node.ts`	Added new `onCreateWebpackConfig` Gatsby Node API to read existing webpack config, append NormalModuleReplacementPlugin to strip `node:` prefix from imports, and disable sqlite resolution.
Testing & Build Configuration `jest.config.js`, `jest.polyfills.js`	Extended Jest transformIgnorePatterns to exclude `until-async`. Added polyfills for MSW 2.x including BroadcastChannel and Web Streams API (ReadableStream, WritableStream, TransformStream) from node runtime modules.
Dependency & Configuration Updates `package.json`	Upgraded Gatsby ecosystem packages to 5.16.0/6.16.0, React to 18.3.1, babel-preset-gatsby to 3.16.0, and other related tools. Added build:compress TypeScript option. Introduced explicit resolutions for react and react-dom to ensure version consistency.
Styling `src/styles/global.css`	Removed CSS import for CookieMessage component from `@ably/ui` library.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A worker hops away to distant files,
Webpack and Gatsby dance with modern smiles,
React refreshed, dependencies align,
Polyfills sprout where streams intertwine,
The build grows lean, the config refined! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main change: a major version upgrade of Gatsby and React dependencies with corresponding ecosystem updates.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch bump-gatsby-version

No actionable comments were generated in the recent review. 🎉

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

kennethkalmer · 2026-02-07T00:23:02Z

data/onPostBuild/compressAssets.js

-/**
- * From here on down is the worker code that is executed by the worker threads
- * in Piscina to perform the actual compression.
- *
- * The number of iterations is set to 15 by default, but can be overridden by
- * setting the ASSET_COMPRESSION_ITERATIONS environment variable. Lower number of
- * iterations means faster compression but lower compression ratio (good for CI
- * and review apps)
- *
- */
-const options = {
-    numiterations: parseInt(process.env.ASSET_COMPRESSION_ITERATIONS || '15', 10),
-};
-const compress = async ({ from, to }) => {
-    const fileContent = await promises_1.default.readFile(from, 'utf8');
-    const compressedContent = await (0, zopfli_1.gzipAsync)(fileContent, options);
-    await promises_1.default.writeFile(to, compressedContent);
-};
-// This strange bit of code is to ensure we export a default function
-// when we're being called by the Piscina worker
-if (!worker_threads_1.isMainThread) {
-    module.exports = async ({ from, to }) => {
-        await compress({ from, to });
-    };
-}


This bit of cleanup has no effect on the compression, the .gz versions are still being created during the build

The newer version of @ably/ui resolves the nested React dependency issues that previously required resolutions in package.json. This upgrade eliminates the need for React version forcing across nested Radix UI dependencies. Changes: - @ably/ui: 17.11.4 → 17.13.2 - Remove obsolete CookieMessage CSS import (component no longer exists) - es-toolkit@1.44.0 added as new dependency Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>

This upgrades all Gatsby ecosystem packages to 5.16.0 to ensure compatibility and avoid webpack bundling conflicts. The upgrade includes security fixes for the qs vulnerability in body-parser. Package updates: - gatsby: 5.13.3 → 5.16.0 - All 19 gatsby-* plugins: → 5.16.0 - babel-preset-gatsby: 3.3.0 → 3.16.0 - react & react-dom: 18.2.0 → 18.3.1 - react-test-renderer: 18.2.0 → 18.3.1 - react-refresh: 0.14.0 → 0.14.2 - webpack@5.105.0 (added as dev dependency) Script changes: - build:compress: Added --skipLibCheck flag for TypeScript 4.6.3 compatibility with newer @types/node Resolutions: - Force single React version (18.3.1) across all packages to prevent duplicate React copies from Radix UI nested dependencies Reference: Gatsby 5.16.0 includes security updates and React 19 support (optional). This follows the same upgrade pattern as ably/voltaire PR #1437. Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>

These configuration changes enable the upgraded dependencies to work correctly with the build pipeline and test environment. Webpack configuration (gatsby-node.ts): - Add onCreateWebpackConfig hook with NormalModuleReplacementPlugin - Strip node: protocol prefix from imports to handle built-in modules - Add sqlite: false fallback to prevent webpack from trying to bundle - Borrowed from ably/voltaire gatsby-node.ts implementation Jest configuration (jest.config.js): - Add until-async to transformIgnorePatterns for MSW 2.x ESM support Jest polyfills (jest.polyfills.js): - Add BroadcastChannel from node:worker_threads for MSW 2.x - Add Web Streams API (ReadableStream, WritableStream, TransformStream) - These polyfills enable MSW 2.x to work in the Node.js test environment Build artifacts (data/onPostBuild/compressAssets.js): - Recompiled with --skipLibCheck flag Test results: 184 tests passing, 23 suites Build time: ~155 seconds All build artifacts generated successfully Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>

kennethkalmer · 2026-02-09T12:39:47Z

@coderabbitai full review

coderabbitai · 2026-02-09T12:39:57Z

✅ Actions performed

Full review triggered.

kennethkalmer commented Feb 7, 2026

View reviewed changes

kennethkalmer and others added 3 commits February 9, 2026 12:04

kennethkalmer force-pushed the bump-gatsby-version branch from baccd95 to b698388 Compare February 9, 2026 12:23

kennethkalmer marked this pull request as ready for review February 9, 2026 12:38

kennethkalmer added the review-app Create a Heroku review app label Feb 9, 2026

ably-ci deployed to ably-docs-bump-gatsby-v-4kkzhv February 9, 2026 12:40 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade Gatsby from 5.13.3 to 5.16.0 with React 18.3.1#3184

Upgrade Gatsby from 5.13.3 to 5.16.0 with React 18.3.1#3184
kennethkalmer wants to merge 3 commits intomainfrom
bump-gatsby-version

kennethkalmer commented Feb 7, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Feb 7, 2026 •

edited

Loading

Uh oh!

kennethkalmer Feb 7, 2026

Uh oh!

kennethkalmer commented Feb 9, 2026

Uh oh!

coderabbitai bot commented Feb 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

Conversation

kennethkalmer commented Feb 7, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Commits

Why This Upgrade

Test Results

Test Plan

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Feb 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

kennethkalmer Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

kennethkalmer commented Feb 9, 2026

Uh oh!

coderabbitai bot commented Feb 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

kennethkalmer commented Feb 7, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 7, 2026 •

edited

Loading