Use Vite

Set up Vite and Vitest as the build and test tools, with vite-plugin-checker for TypeScript checking and ESM configuration. Use when starting or configuring a frontend project.

gkwa f1db951 2 files · 1.6 KB Updated

File contents

Use Vite as the build system and Vitest as the test tool.

ESM Configuration

Use ESM syntax in vite.config.js. Add "type": "module" to package.json so all *.js files are interpreted as ESM. If a file must stay CJS, use the .cjs extension.

Do not use the CJS build of Vite's Node API — it is deprecated and removed in Vite 6. Reference: https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated

vite-plugin-checker

Add vite-plugin-checker to run TypeScript type checking alongside the build:

  1. Install:
pnpm add --save-dev vite-plugin-checker
  1. Add to vite.config.js:
import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    checker({
      typescript: true,
    }),
  ],
});

Type errors appear in the browser overlay and terminal during development. The build fails if TypeScript errors are present — no separate type-check script needed.

gkwa/volcanicviper/tree/main/skills/use-vite commit f1db95130c

Frequently asked questions

npx skillmds@latest add gkwa/use-vite