Skip to content

feat: migrate from connect to connect-next #144

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

Merged
chenjiahan merged 1 commit into from
Mar 9, 2026
Merged

feat: migrate from connect to connect-next #144

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
6 changes: 3 additions & 3 deletions docs/migrate-v1-to-v2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,12 @@ The minimum supported Node.js version is now `^20.19.0 || >=22.12.0`.

> Refer to the [http-proxy-middleware v3 migration guide](https://github.com/chimurai/http-proxy-middleware/blob/master/MIGRATION.md) for details.

### Default app now uses `connect`
### Default app now uses `connect-next`

When `devServer.app` is omitted, `@rspack/dev-server` now creates a
`connect` app instead of an Express app.
`connect-next` app instead of an Express app.

The dev server only needs a minimal middleware pipeline. Connect provides the same `(req, res, next)` interface as Express while being significantly smaller and having fewer dependencies, making it a better fit for this use case.
The dev server only needs a minimal middleware pipeline. [connect-next](https://github.com/rstackjs/connect-next) is an actively maintained fork of Connect that keeps the same `(req, res, next)` middleware interface while staying smaller than Express and having fewer dependencies.

If you relied on Express-only APIs on `devServer.app`, such as `app.get()`,
`app.post()`, or `res.send()`, provide your own Express app explicitly:
Expand Down
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,12 @@
]
},
"dependencies": {
"@types/connect": "^3.4.38",
"@types/connect-history-api-fallback": "^1.5.4",
"@types/serve-index": "^1.9.4",
"@types/serve-static": "^2.2.0",
"@types/ws": "^8.18.1",
"chokidar": "^3.6.0",
"connect": "^3.7.0",
"connect-next": "^4.0.0",
"connect-history-api-fallback": "^2.0.0",
"http-proxy-middleware": "^3.0.5",
"ipaddr.js": "^2.3.0",
Expand Down
58 changes: 9 additions & 49 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion rslib.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ export default defineConfig({
dts: true,
output: {
externals: {
connect: 'commonjs connect',
'connect-history-api-fallback':
'commonjs connect-history-api-fallback',
'webpack-dev-middleware': 'commonjs webpack-dev-middleware',
Expand Down
7 changes: 5 additions & 2 deletions src/server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,10 @@ const memoize = <T>(fn: FunctionReturning<T>): FunctionReturning<T> => {
};
};

const getConnect = memoize(() => require('connect'));
const getConnect = async () => {
const { connect } = await import('connect-next');
return connect;
};
Comment thread
chenjiahan marked this conversation as resolved.
const getServeStatic = memoize(() => require('serve-static'));

const encodeOverlaySettings = (
Expand Down Expand Up @@ -1520,7 +1523,7 @@ class Server<
this.app = (
typeof this.options.app === 'function'
? await this.options.app()
: getConnect()()
: (await getConnect())()
) as A;
}

Expand Down
2 changes: 1 addition & 1 deletion src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export type { FSWatcher, WatchOptions };
import type {
Server as ConnectApplication,
IncomingMessage as ConnectIncomingMessage,
} from 'connect';
} from 'connect-next';
export type { ConnectApplication };
import type { Options as ConnectHistoryApiFallbackOptions } from 'connect-history-api-fallback';
export type { ConnectHistoryApiFallbackOptions };
Expand Down
32 changes: 16 additions & 16 deletions tests/e2e/__snapshots__/app.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
// Rstest Snapshot v1

exports[`app option > should work using "connect (async)" application and "http" server > should handle GET request to index route (/) > console messages 1`] = `
exports[`app option > should work using "connect-next (async)" application and "http" server > should handle GET request to index route (/) > console messages 1`] = `
[
"[rspack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
"[HMR] Waiting for update signal from WDS...",
"Hey.",
]
`;

exports[`app option > should work using "connect (async)" application and "http" server > should handle GET request to index route (/) > page errors 1`] = `[]`;
exports[`app option > should work using "connect-next (async)" application and "http" server > should handle GET request to index route (/) > page errors 1`] = `[]`;

exports[`app option > should work using "connect (async)" application and "http" server > should handle GET request to index route (/) > response status 1`] = `200`;
exports[`app option > should work using "connect-next (async)" application and "http" server > should handle GET request to index route (/) > response status 1`] = `200`;

exports[`app option > should work using "connect (async)" application and "http" server > should handle GET request to index route (/) > response text 1`] = `
exports[`app option > should work using "connect-next (async)" application and "http" server > should handle GET request to index route (/) > response text 1`] = `
"
<!DOCTYPE html>
<html>
Expand All @@ -28,19 +28,19 @@ exports[`app option > should work using "connect (async)" application and "http"
"
`;

exports[`app option > should work using "connect" application and "http" server > should handle GET request to index route (/) > console messages 1`] = `
exports[`app option > should work using "connect-next" application and "http" server > should handle GET request to index route (/) > console messages 1`] = `
[
"[rspack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
"[HMR] Waiting for update signal from WDS...",
"Hey.",
]
`;

exports[`app option > should work using "connect" application and "http" server > should handle GET request to index route (/) > page errors 1`] = `[]`;
exports[`app option > should work using "connect-next" application and "http" server > should handle GET request to index route (/) > page errors 1`] = `[]`;

exports[`app option > should work using "connect" application and "http" server > should handle GET request to index route (/) > response status 1`] = `200`;
exports[`app option > should work using "connect-next" application and "http" server > should handle GET request to index route (/) > response status 1`] = `200`;

exports[`app option > should work using "connect" application and "http" server > should handle GET request to index route (/) > response text 1`] = `
exports[`app option > should work using "connect-next" application and "http" server > should handle GET request to index route (/) > response text 1`] = `
"
<!DOCTYPE html>
<html>
Expand All @@ -56,19 +56,19 @@ exports[`app option > should work using "connect" application and "http" server
"
`;

exports[`app option > should work using "connect" application and "http2" server > should handle GET request to index route (/) > console messages 1`] = `
exports[`app option > should work using "connect-next" application and "http2" server > should handle GET request to index route (/) > console messages 1`] = `
[
"[rspack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
"[HMR] Waiting for update signal from WDS...",
"Hey.",
]
`;

exports[`app option > should work using "connect" application and "http2" server > should handle GET request to index route (/) > page errors 1`] = `[]`;
exports[`app option > should work using "connect-next" application and "http2" server > should handle GET request to index route (/) > page errors 1`] = `[]`;

exports[`app option > should work using "connect" application and "http2" server > should handle GET request to index route (/) > response status 1`] = `200`;
exports[`app option > should work using "connect-next" application and "http2" server > should handle GET request to index route (/) > response status 1`] = `200`;

exports[`app option > should work using "connect" application and "http2" server > should handle GET request to index route (/) > response text 1`] = `
exports[`app option > should work using "connect-next" application and "http2" server > should handle GET request to index route (/) > response text 1`] = `
"
<!DOCTYPE html>
<html>
Expand All @@ -84,19 +84,19 @@ exports[`app option > should work using "connect" application and "http2" server
"
`;

exports[`app option > should work using "connect" application and "https" server > should handle GET request to index route (/) > console messages 1`] = `
exports[`app option > should work using "connect-next" application and "https" server > should handle GET request to index route (/) > console messages 1`] = `
[
"[rspack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
"[HMR] Waiting for update signal from WDS...",
"Hey.",
]
`;

exports[`app option > should work using "connect" application and "https" server > should handle GET request to index route (/) > page errors 1`] = `[]`;
exports[`app option > should work using "connect-next" application and "https" server > should handle GET request to index route (/) > page errors 1`] = `[]`;

exports[`app option > should work using "connect" application and "https" server > should handle GET request to index route (/) > response status 1`] = `200`;
exports[`app option > should work using "connect-next" application and "https" server > should handle GET request to index route (/) > response status 1`] = `200`;

exports[`app option > should work using "connect" application and "https" server > should handle GET request to index route (/) > response text 1`] = `
exports[`app option > should work using "connect-next" application and "https" server > should handle GET request to index route (/) > response text 1`] = `
"
<!DOCTYPE html>
<html>
Expand Down
11 changes: 7 additions & 4 deletions tests/e2e/app.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,16 @@ const staticDirectory = path.resolve(
'../fixtures/static-config/public',
);

const createConnectNextApp = () =>
import('connect-next').then(({ connect }) => connect());
Comment thread
chenjiahan marked this conversation as resolved.

const apps = [
['express', () => require('express')(), 'http'],
['express', () => require('express')(), 'https'],
['connect', () => require('connect')(), 'http'],
['connect', () => require('connect')(), 'https'],
['connect', () => require('connect')(), 'http2'],
['connect (async)', () => require('connect')(), 'http'],
['connect-next', createConnectNextApp, 'http'],
['connect-next', createConnectNextApp, 'https'],
['connect-next', createConnectNextApp, 'http2'],
['connect-next (async)', async () => createConnectNextApp(), 'http'],
[
'hono',
() => new (require('hono').Hono)(),
Expand Down