Unable to use own certificates in dev mode

[taylorzane]

Describe the bug

When using SvelteKit in HTTPS mode, it is no longer possible (as of #2232) to specify a collection of HTTPS certificates in the svelte.config.js file.

Reproduction

MVP Repository to cause the error (doesn't actually have certificates, but they're not important at this point)

https://github.com/taylorzane/svelte-kit-https-repro

git clone https://github.com/taylorzane/svelte-kit-https-repro
cd svelte-kit-https-repro
npm install
npm run dev # throws a warning, doesn't try to use empty certs object

svelte.config.js

import fs from 'fs'
import path from 'path'

const keys = []
const certs = []
const cas = []

keys.push(fs.readFileSync(path.join('/path/to/certs', 'key.pem')))
certs.push(fs.readFileSync(path.join('/path/to/certs', 'cert.pem')))
cas.push(fs.readFileSync(path.join('/path/to/certs', 'ca.pem')))

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    target: '#app',
    vite: {
      server: {
        https: {
          key: keys,
          cert: certs,
          ca: cas
        }
      }
    }
  }
}

export default config

Logs

(full logs are sensitive, but this is the relevant snippet)

$ pnpm run dev
The value for kit.vite.server.https specified in svelte.config.js has been ignored. This option is controlled by SvelteKit.

$ pnpm run dev -- --https
The value for kit.vite.server.https specified in svelte.config.js has been ignored. This option is controlled by SvelteKit.

System Info

System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
    Memory: 1.93 GB / 32.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 16.2.0 - ~/.nodenv/versions/16.2.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.13.0 - ~/.nodenv/versions/16.2.0/bin/npm
  Browsers:
    Chrome: 93.0.4577.82
    Firefox: 91.0.1
    Firefox Developer Edition: 79.0
    Safari: 14.1.1
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.173 
    svelte: ^3.41.0 => 3.42.5

Severity

blocking an upgrade

Additional Information

No response

[benmccann]

Please provide a repository that reproduces this. I can't recreate the steps for all 200+ issues like researching how to generate .pem files, etc. It's not scalable and we need issue reporters to help with this work

[benmccann]

You wrote this:

    vite: {
      server: {
        key: keys,
        cert: certs,
        ca: cas
      }
    }

Did you mean to write this?

    vite: {
      server: {
        https: {
          key: keys,
          cert: certs,
          ca: cas
        }
      }
    }

[taylorzane]

Yes, I've edited my original reproduction snippet. I'm working on a repository for this issue, although the actual PEM files don't even need to be generated in order to reproduce the issue. They can be empty arrays and will still be flagged by the deep_merge function in kit/src/core/dev/index.js

[taylorzane]

I've updated my original post to include a link to this repository: https://github.com/taylorzane/svelte-kit-https-repro

[benmccann]

Thanks! I was having trouble reproducing. It turns out that I actually was, but there's another bug that was hiding the error message from me: #2511 😝

[robots4life]

const config = {
    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte',
        vite: () => ({
            server: {
                host: '0.0.0.0',
                port: 3000,
                https: {
                    key: readFileSync('/app.loc.key'),

                    cert: readFileSync('/app.loc.crt')
                },
                hmr: {
                    host: 'app.loc',
                    protocol: 'wss',
                    port: 24678
                }
            }
        })
    }
};

I develop under singed certificates locally but unfortunately above config does not work any more.

The value for kit.vite.server.host specified in svelte.config.js has been ignored. This option is controlled by SvelteKit.
The value for kit.vite.server.https specified in svelte.config.js has been ignored. This option is controlled by SvelteKit.

A fix is highly appreciated. 👍
Hopefully HMR will continue to work properly, without constant reloading of the page. 🤞
Thank you. ❤️

Ref: vitejs/vite#1992.

[EirikFA]

I am still unable to use a custom HTTPS certificate, it seems SvelteKit is ignoring kit.vite.server.https. It works in next.168, but not in any newer versions (not even in next.176 when #2512 was merged..

EDIT: After some investigation, it seems the code that was patched in #2512 is different after shipping to node_modules. Manually changing it and not using the --https flag displays a URL without https in the console, but HTTPS is working with a custom certificate.

[talgolan]

"Longtime listener, first-time caller." I can confirm that config.kit.vite.server.https.cert and config.kit.vite.server.https.key are not being passed/recognized by svelte-kit dev for any release after next.168.

[benmccann]

@EirikFA @talgolan would one of you be able to file a new issue with full steps to reproduce? (e.g. what do I need to do to generate a .pem file, etc.)

[talgolan]

Absolutely.

[robots4life]

Absolutely.

@talgolan have you filed a new issue and if so can you link me please, thx.

[talgolan]

@robots4life: Here's the issue I created...

#2617

I believe @benmccann has already corrected the problem. I'm just waiting for a new version to confirm.

[benmccann]

I just kicked off a new release