undici's `new Request` is incompatible with HTTP/2 requests

[Elsoberanold]

Describe the bug

After migration to SvelteKit 2 serving throw https just stopped working. It does not crash on execution but at the moment we reach exposed endpoint it returns the following error:

TypeError: Headers.append: ":method" is an invalid header name.
    at webidl.errors.exception (node:internal/deps/undici/undici:1635:14)
    at webidl.errors.invalidArgument (node:internal/deps/undici/undici:1646:28)
    at appendHeader (node:internal/deps/undici/undici:2052:29)
    at fill (node:internal/deps/undici/undici:2038:11)
    at new Request (node:internal/deps/undici/undici:6151:13)
    at getRequest (file:///Users/gfbatista/Projects/skedmill_ts/frontend/node_modules/@sveltejs/kit/src/exports/node/index.js:101:9)
    at file:///Users/gfbatista/Projects/skedmill_ts/frontend/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:475:27

Reproduction

This error can be reproduced by starting a new SvelteKit 2 project and changing vite.config.ts accordingly with documentation provided here: https://vitejs.dev/guide/migration#remove-https-flag-and-https-true . I have tried to use https://github.com/vitejs/vite-plugin-basic-ssl and https://github.com/liuweiGL/vite-plugin-mkcert both with same result.
vite.config.ts file:

import { sveltekit } from '@sveltejs/kit/vite';
import basicSsl from '@vitejs/plugin-basic-ssl'
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [basicSsl(), sveltekit()]
});

### Logs

```Shell
TypeError: Headers.append: ":method" is an invalid header name.
    at webidl.errors.exception (node:internal/deps/undici/undici:1635:14)
    at webidl.errors.invalidArgument (node:internal/deps/undici/undici:1646:28)
    at appendHeader (node:internal/deps/undici/undici:2052:29)
    at fill (node:internal/deps/undici/undici:2038:11)
    at new Request (node:internal/deps/undici/undici:6151:13)
    at getRequest (file:///.../node_modules/@sveltejs/kit/src/exports/node/index.js:101:9)
    at file:///.../node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:475:27

### System Info

```Shell
System:
    OS: macOS 14.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 130.47 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.4.0 - ~/.nvm/versions/node/v21.4.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v21.4.0/bin/npm
    pnpm: 7.27.0 - ~/.nvm/versions/node/v18.12.1/bin/pnpm
    bun: 1.0.13 - ~/.bun/bin/bun
  Browsers:
    Safari: 17.2
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.0.0 
    @sveltejs/kit: ^2.0.0 => 2.0.0 
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.1 
    svelte: ^4.2.7 => 4.2.8 
    vite: ^5.0.0 => 5.0.10

Severity

serious, but I can work around it

Additional Information

I think that should be a resurgence of this issue: #3479
I have tryed this work around and it works:

vite.config.ts:

import basicSsl from '@vitejs/plugin-basic-ssl'
import { defineConfig } from 'vite';

export default defineConfig({
	server: {
		proxy: {}
	},
	plugins: [basicSsl(), sveltekit()]
});```

[benmccann]

It looks like @Conduitry removed the previous workaround in #7142 (which had been added in #3572). I'm not sure what's different about Vite 5 that's triggering this issue now

[CoolLaboratory]

I generated my certs with mkcert and load them manually.

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';
import type { ServerOptions } from 'vite';

export default defineConfig(({command}) => {

  switch (command) {
    case 'serve': 
      const { key, cert } = JSON.parse(
        readFileSync(resolve(__dirname, 'path/to', '__certs', 'www.json'), 'utf-8'));
			
    const server: ServerOptions = {
      host: 'www.acme.test',
      port: 3002,
      strictPort: true,
      https: { key, cert },
      //  without the proxy does NOT work. 
      proxy: {}
    };
		
    return {
      server,
      plugins: [sveltekit()]
    }
    default: return { plugins: [sveltekit()] }
  }
});

the helper function i came up.

const { createCA, createCert } = require('mkcert');
const { writeFileSync, readFile } = require('node:fs');
const { resolve } = require('node:path');

(async () => {
  const { key: caKey, cert: caCert } = await createCA({
    organization: 'ACME CA',
    countryCode: 'GR',
    state: 'Attica',
    locality: 'Athens',
    validity: 365
  });


  try {
      await readFile (
        resolve(__dirname, 'path/to', '__certs', 'www.json'),
        'utf-8'
      ) // DO NOTHING
    } catch (error) {
      // ELSE CREATE A NEW CERT
      const wwwCert = await createCert({
        ca: { key: caKey, cert: caCert },
        domains: ['127.0.0.1', 'localhost', 'www.acme.test'],
        validity: 365
      });
    
      writeFileSync(
        resolve(__dirname, ''path/to', '__certs', 'www.json'),
        JSON.stringify({ key: wwwCert.key, cert: wwwCert.cert }, null, 2)
      );
    }

})()

for a work round..

[hronro]

May related to #11213

For workarounds, you can try downgrade Node.js to v20 or try disable HTTP/2 in your browser.

[giviz]

I have the same issue while upgrading to vite 5 and using node 21.
Downgrading to node 20 fix the issue.

[bogacg]

I'm using the solution @Elsoberanold provides in the last paragraph (Additional Information) with a tiny change, server.https instead of server.proxy.

import basicSsl from '@vitejs/plugin-basic-ssl'
import { defineConfig } from 'vite';

export default defineConfig({
	server: {
		https: {}
	},
	plugins: [basicSsl(), sveltekit()]
});```

This way you force HTTPS but it also let you run with --host option when you need to test your app in local network.

Update:

After few days (and few minor version updates in Node 21) I had exact same error @Elsoberanold shares above with this plugin config.
nvm use 20 is for the rescue, for now.

[liamdiprose]

Downgrading to node 20 worked initially, but then it would crash with a "Transfer-Encoding" header being present.

Adding server.proxy: {} worked:

export default defineConfig({
    server: {
        https: {
            ...
        },
        proxy: {},
    },
     ...
})

[mattpilott]

I've just run into this after updating to 20.12.1

TypeError: Headers.append: ":method" is an invalid header name.
    at webidl.errors.exception (node:internal/deps/undici/undici:1801:14)
    at webidl.errors.invalidArgument (node:internal/deps/undici/undici:1812:28)
    at appendHeader (node:internal/deps/undici/undici:2218:29)
    at fill (node:internal/deps/undici/undici:2204:11)
    at new Request (node:internal/deps/undici/undici:6316:13)
    at getRequest (file:///Users/Matt/Sites/better/node_modules/@sveltejs/kit/src/exports/node/index.js:107:9)
    at file:///Users/Matt/Sites/better/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:497:27
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Log

  System:
    OS: macOS 14.5
    CPU: (16) arm64 Apple M3 Max
    Memory: 1.36 GB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.1 - /opt/homebrew/opt/node@20/bin/node
    npm: 10.5.0 - /opt/homebrew/opt/node@20/bin/npm
    pnpm: 8.15.6 - /opt/homebrew/bin/pnpm
    bun: 1.1.2 - ~/.bun/bin/bun
  Browsers:
    Safari: 17.5
  npmPackages:
    @sveltejs/adapter-vercel: ^5.2.0 => 5.2.0 
    @sveltejs/kit: ^2.5.5 => 2.5.5 
    @sveltejs/vite-plugin-svelte: ^3.0.2 => 3.0.2 
    svelte: ^4.2.12 => 4.2.12 
    vite: ^5.2.8 => 5.2.8 

[bogacg]

@mattpilott I also did get that error again (I guess it was last week or early this week) and then updated my packages, clean install and run it in Node 21 latest this time. Added proxy: {} option to config as @liamdiprose advised. I've been running error free this week.

[mattpilott]

@bogacg yes proxy worked for me too!

[kamerat]

I tested different recent node versions to see where it broke and it seems v20.12.1 is where this error occurs for me.

[m1027]

A simple downgrade from v20.12.1 back to v20.11.0, without any other config file change, worked here.

[dlebech]

@kamerat I see the same. The error occurs when upgrading from Node v20.12.0 to v20.12.1. The server.proxy: {} setting did not work for me.

Here's the changelog. Based on the stracktrace above, the error is being thrown in the undici library, which seems to have been updated from v5.28.3 to v5.28.4 in Node v20.12.1, but I'm having trouble seeing what specifically should have changed between these versions to cause this error.

Interestingly, it seems that there was an attempt at fixing this a long time ago in Sveltekit which was then reverted back again: #7142

Update 2024-05-02

This is also an issue on Node 22.1.0

[th0rgall]

I just upgraded a project to SvelteKit 2 (2.7.1), and I believe I'm experiencing a similar issue with a different error log. I'm using vite-plugin-mkcert@1.17.6 to enable the https server.

I was using node v20.18.0. Downgrading to v20.11.0 as suggested above was also a functional workaround for me.

TypeError: Request constructor: init.headers is a symbol, which cannot be converted to a DOMString.
    at webidl.errors.exception (node:internal/deps/undici/undici:3384:14)
    at webidl.converters.DOMString (node:internal/deps/undici/undici:3650:29)
    at webidl.converters.ByteString (node:internal/deps/undici/undici:3658:35)
    at Object.record<ByteString, ByteString> (node:internal/deps/undici/undici:3567:30)
    at webidl.converters.HeadersInit (node:internal/deps/undici/undici:8715:67)
    at Object.RequestInit (node:internal/deps/undici/undici:3624:21)
    at new Request (node:internal/deps/undici/undici:9267:34)
    at getRequest (file:///<project dir>/node_modules/@sveltejs/kit/src/exports/node/index.js:109:9)
    at file:///<project dir>/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:497:27
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)