httpsvite

How to use https in Vite with vite-plugin-mkcert?

I'm trying to run my app on the local environment with https.

I'm using vite-plugin-mkcert.

vite-config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import mkcert from "vite-plugin-mkcert";

export default defineConfig({
  server: {
    https: true,
  },
  plugins: [react(), mkcert()],
});

And I'm getting error after npm run dev:

error when starting dev server:
Error: EISDIR: illegal operation on a directory, open '/Users/{username}/.vite-plugin-mkcert/mkcert'

and after re-run npm run dev:

error when starting dev server:
Error: Command failed: "/Users/{username}/.vite-plugin-mkcert/mkcert" -CAROOT
/bin/sh: /Users/{username}/.vite-plugin-mkcert/mkcert: is a directory

    at ChildProcess.exithandler (node:child_process:419:12)
    at ChildProcess.emit (node:events:513:28)
    at maybeClose (node:internal/child_process:1091:16)
    at Socket.<anonymous> (node:internal/child_process:449:11)
    at Socket.emit (node:events:513:28)
    at Pipe.<anonymous> (node:net:320:12)

Node: 18.13.0 Vite: 4.1.0 vite-plugin-mkcert: 1.13.2 macOS

Solution

  • I had the exact same problem.

    I don't know what is causing the issue, but uninstalling (AND removing the .vite-plugin-cert-directory from home ~) and reinstalling an earlier version 1.10.1 seems to have fixed this for me.

    try:
    npm i vite-plugin-mkcert@1.10.1 -D