Conversation
Introduce Vite configuration files for building the server and all client bundles (web, apps, editionsCrossword) as the first phase of migrating from webpack to Vite SSR with Rolldown. - vite/vite.config.shared.ts: shared define, resolve, sourcemap settings - vite/vite.config.client.ts: parameterized client build with Preact aliasing, manualChunks, SVG handling, and per-build browser targets - vite/vite.config.server.ts: SSR build targeting Node with CJS output - vite/build.ts: orchestration script (server first, clients in parallel) - vite/browser-targets.ts: ESM port of webpack/browser-targets.js - webpack/bundles.mjs: ESM wrapper for CJS bundles.js (Rollup compat) - makefile: added vite-build and vite-dev targets - debug.ts: CSS import uses ?raw suffix for Vite compatibility Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the webpack dynamic import pattern in doHydration.tsx with a static island registry built via Vite's import.meta.glob. Each island component is still lazily loaded as its own chunk. - Add islandRegistry.ts using import.meta.glob for all *.island.tsx files - Update doHydration.tsx to look up islands from the registry - Remove webpackPublicPath.ts, decidePublicPath.ts, dynamicImport.ts - Strip all webpackMode/webpackChunkName comments from entry points - Remove guardianPolyfilledImport from window.guardian types - Swap tsconfig types from webpack-env to vite/client Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Vite manifests are keyed by source path with nested entry objects (unlike webpack's flat key-value format). Update getPathFromManifest to look up entries by source path for entry points and by name for shared chunks like frameworks. Update script hash regex from 20 to 8 chars to match Vite's output. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Simplify server.ts to use named re-export instead of webpack-hot-server-middleware default export pattern. Add inlineDynamicImports to server config to produce a single server.js file, preventing chunk collisions with client assets in dist/. Add default export so server config works with vite build --config CLI. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace webpack-dev-server + webpack-hot-server-middleware with Vite's dev server in middleware mode. Uses vite.ssrLoadModule() for instant server-side hot reload without full restart. Add ssr-cjs-plugin to wrap CJS packages (e.g. @guardian/bridget) with ESM wrappers for Vite 6's ESM-based SSR module runner. Fix CJS named imports across the codebase (jsdom, log4js, sanitize-html, compare-versions, @creditkarma/thrift-server-core) by switching to default import + destructuring pattern. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace @storybook/react-webpack5 with @storybook/react-vite - Convert webpackFinal to viteFinal in .storybook/main.ts - Remove @storybook/addon-webpack5-compiler-swc - Remove all webpack magic comments (webpackChunkName, webpackMode) from dynamic imports across the codebase - Delete webpack config files (webpack.config.*.js, svg.cjs, .swcrc.json, @types/) - Remove webpack and related dependencies from package.json: webpack, webpack-cli, webpack-dev-server, webpack-dev-middleware, webpack-hot-middleware, webpack-hot-server-middleware, webpack-merge, webpack-manifest-plugin, webpack-assets-manifest, webpack-messages, webpack-node-externals, webpack-bundle-analyzer, webpack-sources, @svgr/webpack, swc-loader, css-loader, to-string-loader, dynamic-import-polyfill, @guardian/shimport Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- ssr-cjs-plugin: add explicit return for resolveId hook - vite.config.server: use string instead of RegExp for ssr.external - debug.ts: remove stale @ts-expect-error (Vite provides ?raw types) - doHydration.tsx: cast module export to React.FunctionComponent Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Install @storybook/react-vite and remove @storybook/react-webpack5 and @storybook/addon-webpack5-compiler-swc from lockfile. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Previously typed incidentally by @types/webpack-env which was removed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Move .swcrc.json from webpack/ to .swcrc.jest.json (Jest-only concern) - Add Jest mock for islandRegistry.ts (import.meta.glob unsupported) - Revert nativeConnection.ts to named imports (client-side, not SSR) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dev mode now serves modules by source path (e.g. /assets/src/client/main.web.ts) matching how Vite's dev server resolves modules. Removes explicit frameworks.js script tags since ES module imports auto-resolve chunk dependencies. Adds @vite/client script injection for HMR support in dev mode. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Preact aliases in the dev server config were leaking into SSR module resolution, causing renderToString to use preact-render-to-string instead of react-dom/server, which resulted in empty HTML output. Remove Preact aliases from both dev and prod client configs to use vanilla React everywhere. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
vite-plugin-svgr defaults to only processing *.svg?react imports. Add include: '**/*.svg' so all SVG imports are transformed into React components, matching the previous @svgr/webpack behavior. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The plugin was wrapping CJS packages with createRequire() for both SSR and client requests. Now it only applies for SSR (checking options.ssr), and @guardian/bridget is added to optimizeDeps.include so Vite's built-in pre-bundling handles CJS→ESM conversion for client-side. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Vite in middleware mode was starting its HMR WebSocket on a separate port (24678), so the browser couldn't connect. Pass the Express HTTP server to Vite's hmr config so the WebSocket shares port 3030, and file changes trigger full page reloads as expected for SSR. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Route jsdom, log4js, sanitize-html, compare-versions, and
@creditkarma/thrift-server-core through Vite's SSR pipeline via
ssr.noExternal + ssrCjsPlugin so source code can use idiomatic
`import { X } from 'pkg'` instead of default-import + destructure.
Centralise the CJS package list in vite/cjs-packages.ts and wire it
into both the dev server and the production server build (the plugin
was previously missing from vite.config.server.ts).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use Node 22.18 and remove tsx from Vite script invocations
…ept islands which are separate chunks
… to all manifests
arelra
added
maintenance
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Co-Authored-By: Claude Opus noreply@anthropic.com
What does this change?
Migrate from Webpack + SWC to Vite + Rolldown
very WIP
Why?
🚀
Screenshots