Skip to content

Upgrade Gatsby from 5.13.3 to 5.16.0 with React 18.3.1 #3184

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
kennethkalmer wants to merge 3 commits into
base: main
Choose a base branch
from
+2,611 −3,277
Open

Upgrade Gatsby from 5.13.3 to 5.16.0 with React 18.3.1 #3184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ecf1f14
Upgrade @ably/ui from 17.11.4 to 17.13.2
kennethkalmer Feb 6, 2026
618e4d7
Upgrade Gatsby from 5.13.3 to 5.16.0 with React 18.3.1
kennethkalmer Feb 6, 2026
b698388
Add configuration for Gatsby 5.16.0 and MSW 2.x compatibility
kennethkalmer Feb 6, 2026
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
30 changes: 1 addition & 29 deletions data/onPostBuild/compressAssets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,6 @@ exports.onPostBuild = void 0;
const fast_glob_1 = __importDefault(require("fast-glob"));
const path_1 = __importDefault(require("path"));
const piscina_1 = __importDefault(require("piscina"));
const worker_threads_1 = require("worker_threads");
const promises_1 = __importDefault(require("fs/promises"));
const zopfli_1 = require("@gfx/zopfli");
/**
* This file is inspired by gatsby-plugin-zopfli and is essentially a smaller,
* inlined version of it.
Expand All @@ -36,36 +33,11 @@ const onPostBuild = async ({ reporter }) => {
const maxThreads = parseInt(process.env.COMPRESS_MAX_THREADS || '12', 10);
reporter.info(`Compressing ${files.length} files with ${maxThreads} threads`);
const pool = new piscina_1.default({
filename: __filename.replace('.ts', '.js'),
filename: path_1.default.join(__dirname, 'compressAssetsWorker.js'),
maxThreads,
});
const compress = files.map((file) => pool.run(file));
await Promise.all(compress);
reporter.info(`Compressed ${pool.completed} files - ${(pool.duration / 1000).toFixed(3)}s`);
};
exports.onPostBuild = onPostBuild;
/**
* 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 });
};
}
Comment on lines -47 to -71
Copy link
Member Author

@kennethkalmer kennethkalmer Feb 7, 2026

Choose a reason for hiding this comment

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

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

26 changes: 26 additions & 0 deletions gatsby-node.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,29 @@ export { onCreatePage } from './data/onCreatePage';
export { createSchemaCustomization } from './data/onCreateNode/create-graphql-schema-customization';
export { onCreateBabelConfig } from './gatsby-overwrite-config';
export { onPostBuild } from './data/onPostBuild';

// Configure webpack to handle node: protocol for built-in modules
import type { GatsbyNode } from 'gatsby';
import webpack from 'webpack';

export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = ({ actions, getConfig }) => {
const prevConfig = getConfig();

actions.replaceWebpackConfig({
...prevConfig,
plugins: [
...prevConfig.plugins,
// Strip node: prefix from imports to handle built-in Node modules
new webpack.NormalModuleReplacementPlugin(/^node:/, (resource) => {
resource.request = resource.request.replace(/^node:/, '');
}),
],
resolve: {
...prevConfig.resolve,
fallback: {
...prevConfig.resolve?.fallback,
sqlite: false,
},
},
});
};
2 changes: 1 addition & 1 deletion jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ module.exports = {
modulePathIgnorePatterns: ['<rootDir>/examples/'],
// NOTE: This is a workaround for compilation issues with .d.ts files
transformIgnorePatterns: [
`node_modules/(?!(gatsby|gatsby-script|use-keyboard-shortcut|react-medium-image-zoom|@react-hook/media-query|@mdx-js/react|@ably/ui/core)/)`,
`node_modules/(?!(gatsby|gatsby-script|use-keyboard-shortcut|react-medium-image-zoom|@react-hook/media-query|@mdx-js/react|@ably/ui/core|until-async)/)`,
],
testEnvironmentOptions: {
url: `http://localhost`,
Expand Down
10 changes: 10 additions & 0 deletions jest.polyfills.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,13 @@ Reflect.set(globalThis, 'Request', Request);
Reflect.set(globalThis, 'Response', Response);
Reflect.set(globalThis, 'Headers', Headers);
Reflect.set(globalThis, 'FormData', FormData);

// Polyfill BroadcastChannel for MSW 2.x
const { BroadcastChannel } = require('node:worker_threads');
Reflect.set(globalThis, 'BroadcastChannel', BroadcastChannel);

// Polyfill Web Streams API for MSW 2.x
const { ReadableStream, WritableStream, TransformStream } = require('node:stream/web');
Reflect.set(globalThis, 'ReadableStream', ReadableStream);
Reflect.set(globalThis, 'WritableStream', WritableStream);
Reflect.set(globalThis, 'TransformStream', TransformStream);
55 changes: 30 additions & 25 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"refresh": "curl -X POST http://localhost:8000/__refresh",
"build": "yarn clean && gatsby build --prefix-paths",
"build:cli": "tsc -p .",
"build:compress": "tsc data/onPostBuild/compressAssets.ts --outDir data/onPostBuild --target es2020 --module commonjs --esModuleInterop --allowSyntheticDefaultImports",
"build:compress": "tsc data/onPostBuild/compressAssets.ts --outDir data/onPostBuild --target es2020 --module commonjs --esModuleInterop --allowSyntheticDefaultImports --skipLibCheck",
"serve": "gatsby serve --prefix-paths",
"clean": "gatsby clean",
"rebuild": "gatsby clean && gatsby build --prefix-paths && gatsby serve --prefix-paths",
Expand All @@ -40,7 +40,7 @@
"validate-llms-txt": "node bin/validate-llms.txt.ts"
},
"dependencies": {
"@ably/ui": "17.11.4",
"@ably/ui": "17.13.2",
"@codesandbox/sandpack-react": "^2.20.0",
"@codesandbox/sandpack-themes": "^2.0.21",
"@gfx/zopfli": "^1.0.15",
Expand All @@ -58,25 +58,25 @@
"fast-glob": "^3.3.3",
"front-matter": "^4.0.2",
"fs-extra": "^10.0.1",
"gatsby": "^5.13.3",
"gatsby": "5.16.0",
"gatsby-plugin-client-side-redirect": "^1.1.0",
"gatsby-plugin-google-tagmanager": "^5.14.0",
"gatsby-plugin-image": "^3.3.0",
"gatsby-plugin-layout": "^4.14.0",
"gatsby-plugin-manifest": "^5.3.0",
"gatsby-plugin-mdx": "^5.14.0",
"gatsby-plugin-react-helmet": "^6.3.0",
"gatsby-plugin-google-tagmanager": "5.16.0",
"gatsby-plugin-image": "3.16.0",
"gatsby-plugin-layout": "4.16.0",
"gatsby-plugin-manifest": "5.16.0",
"gatsby-plugin-mdx": "5.16.0",
"gatsby-plugin-react-helmet": "6.16.0",
"gatsby-plugin-root-import": "^2.0.9",
"gatsby-plugin-sharp": "^5.8.1",
"gatsby-plugin-sitemap": "^6.12.1",
"gatsby-remark-autolink-headers": "^6.14.0",
"gatsby-plugin-sharp": "5.16.0",
"gatsby-plugin-sitemap": "6.16.0",
"gatsby-remark-autolink-headers": "6.16.0",
"gatsby-remark-gifs": "^1.2.0",
"gatsby-remark-images": "^7.16.0",
"gatsby-source-filesystem": "^5.12.0",
"gatsby-remark-images": "7.16.0",
"gatsby-source-filesystem": "5.16.0",
"gatsby-source-rss-feed": "^1.2.2",
"gatsby-transformer-remark": "^6.12.0",
"gatsby-transformer-sharp": "^5.3.0",
"gatsby-transformer-yaml": "^5.8.0",
"gatsby-transformer-remark": "6.16.0",
"gatsby-transformer-sharp": "5.16.0",
"gatsby-transformer-yaml": "5.16.0",
"htmr": "^1.0.2",
"js-yaml": "^4.1.1",
"lodash": "^4.17.23",
Expand All @@ -85,9 +85,9 @@
"mixpanel-browser": "^2.73.0",
"piscina": "^5.0.0",
"posthog-js": "^1.301.1",
"react": "^18.2.0",
"react": "18.3.1",
"react-accessible-accordion": "^5.0.0",
"react-dom": "^18.2.0",
"react-dom": "18.3.1",
"react-helmet": "^6.1.0",
"react-medium-image-zoom": "^5.1.2",
"react-select": "^5.7.0",
Expand Down Expand Up @@ -119,7 +119,7 @@
"babel-jest": "^30.2.0",
"babel-plugin-module-resolver": "^5.0.0",
"babel-plugin-transform-define": "^2.1.4",
"babel-preset-gatsby": "^3.3.0",
"babel-preset-gatsby": "3.16.0",
"dotenv": "^17.2.3",
"eslint": "^8.29.0",
"eslint-config-prettier": "^10.1.8",
Expand All @@ -129,7 +129,7 @@
"eslint-plugin-react": "^7.34.0",
"eslint-plugin-react-hooks": "^4.6.0",
"fast-check": "^3.4.0",
"gatsby-plugin-postcss": "^6.3.0",
"gatsby-plugin-postcss": "6.16.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^30.2.0",
"jest-axe": "^10.0.0",
Expand All @@ -140,11 +140,16 @@
"postcss-import": "^15.1.0",
"prettier": "^3.2.5",
"prettier-2": "npm:prettier@^2",
"react-refresh": "^0.14.0",
"react-test-renderer": "^18.2.0",
"react-refresh": "0.14.2",
"react-test-renderer": "18.3.1",
"source-map": "^0.7.4",
"tailwindcss": "^3.3.6",
"undici": "^5.29.0"
"undici": "^5.29.0",
"webpack": "5"
},
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
"resolutions": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
}
}
1 change: 0 additions & 1 deletion src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

@import '@ably/ui/reset/styles.css';
@import '@ably/ui/core/styles.css';
@import '@ably/ui/core/CookieMessage/component.css';
@import '@ably/ui/core/Slider/component.css';
@import '@ably/ui/core/Code/component.css';
@import '@ably/ui/core/Flash/component.css';
Expand Down
Loading