diff --git a/.changeset/blue-spies-destroy.md b/.changeset/blue-spies-destroy.md new file mode 100644 index 00000000..d12310db --- /dev/null +++ b/.changeset/blue-spies-destroy.md @@ -0,0 +1,5 @@ +--- +"@ladle/react": minor +--- + +Add option to disable http2 when using https. We observed that some bigger Ladle instances throw ERR_HTTP2_PROTOCOL_ERROR errors after upgrading from Node18 to Node20. This setting can be used as a workaround. diff --git a/packages/ladle/lib/cli/vite-dev.js b/packages/ladle/lib/cli/vite-dev.js index c6add0b4..795c1c8a 100644 --- a/packages/ladle/lib/cli/vite-dev.js +++ b/packages/ladle/lib/cli/vite-dev.js @@ -2,6 +2,7 @@ import { createServer, searchForWorkspaceRoot } from "vite"; import koa from "koa"; import http from "http"; import http2 from "http2"; +import https from "https"; import c2k from "koa-connect"; import path from "path"; import getPort from "get-port"; @@ -102,8 +103,8 @@ const bundler = async (config, configFolder) => { (vite.config.server.host === true ? "0.0.0.0" : typeof vite.config.server.host === "string" - ? vite.config.server.host - : "localhost"); + ? vite.config.server.host + : "localhost"); const serverUrl = `${useHttps ? "https" : "http"}://${hostname}:${port}${ vite.config.base || "" }`; @@ -131,27 +132,33 @@ const bundler = async (config, configFolder) => { }; if (useHttps) { - http2 - .createSecureServer( - { - // Support HMR WS connection - allowHTTP1: true, - maxSessionMemory: 100, - settings: { - // Note: Chromium-based browser will initially allow 100 concurrent streams to be open - // over a single HTTP/2 connection, unless HTTP/2 server advertises a different value, - // in which case it will be capped at maximum of 256 concurrent streams. Hence pushing - // to the limit while in development, in an attempt to maximize the dev performance by - // minimizing the chances of the module requests queuing/stalling on the client-side. - // @see https://source.chromium.org/chromium/chromium/src/+/4c44ff10bcbdb2d113dcc43c72f3f47a84a8dd45:net/spdy/spdy_session.cc;l=477-479 - maxConcurrentStreams: 256, + if (config.disableHttp2) { + https + .createServer({ ...vite.config.server.https }, app.callback()) + .listen(port, hostname, listenCallback); + } else { + http2 + .createSecureServer( + { + // Support HMR WS connection + allowHTTP1: true, + maxSessionMemory: 100, + settings: { + // Note: Chromium-based browser will initially allow 100 concurrent streams to be open + // over a single HTTP/2 connection, unless HTTP/2 server advertises a different value, + // in which case it will be capped at maximum of 256 concurrent streams. Hence pushing + // to the limit while in development, in an attempt to maximize the dev performance by + // minimizing the chances of the module requests queuing/stalling on the client-side. + // @see https://source.chromium.org/chromium/chromium/src/+/4c44ff10bcbdb2d113dcc43c72f3f47a84a8dd45:net/spdy/spdy_session.cc;l=477-479 + maxConcurrentStreams: 256, + }, + // @ts-ignore + ...vite.config.server.https, }, - // @ts-ignore - ...vite.config.server.https, - }, - app.callback(), - ) - .listen(port, hostname, listenCallback); + app.callback(), + ) + .listen(port, hostname, listenCallback); + } } else { http.createServer(app.callback()).listen(port, hostname, listenCallback); } diff --git a/packages/ladle/lib/shared/default-config.js b/packages/ladle/lib/shared/default-config.js index b4c41614..0d092b47 100644 --- a/packages/ladle/lib/shared/default-config.js +++ b/packages/ladle/lib/shared/default-config.js @@ -7,6 +7,7 @@ export default { storyOrder: (stories) => stories, // default is alphabetical viteConfig: undefined, appendToHead: "", + disableHttp2: false, noWatch: false, port: 61000, previewPort: 8080, diff --git a/packages/ladle/lib/shared/types.ts b/packages/ladle/lib/shared/types.ts index 7bba7c50..e50798e8 100644 --- a/packages/ladle/lib/shared/types.ts +++ b/packages/ladle/lib/shared/types.ts @@ -178,6 +178,7 @@ export type Config = { defaultStory: string; storyOrder: StoryOrder; appendToHead: string; + disableHttp2: boolean; viteConfig?: string; host?: string; port: number;