wasp/client/vite

The Vite plugin that your app's client needs.

Interfaces

WaspPluginOptions

The options of the wasp Vite plugin.

Properties

reactOptions?

optional reactOptions?: Options

Options for the underlying @vitejs/plugin-react plugin.

This allows you to configure React-specific options like which files the plugin processes, the JSX runtime and import source, and the Fast Refresh host.

Functions

wasp()

wasp(options?): PluginOption

The Vite plugin that sets up your client:

• The configuration that Wasp full-stack apps need to work.
• Environment variable validation.
• Prevention of server imports in client code.
• TypeScript type checking during production builds.

You must use it in your vite.config.ts (or vite.config.js), and it must be the first plugin in the plugins array. Add any other plugins (like Tailwind CSS) after it.

The plugin merges the rest of your Vite config with Wasp's defaults, but it enforces some values that Wasp needs, and throws an error if you set them to anything else. See the enforced options.

Parameters

options?

WaspPluginOptions

Returns

PluginOption

Example

// vite.config.ts
import { wasp } from "wasp/client/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    wasp({
      reactOptions: {
        // Pass any @vitejs/plugin-react options here
      },
    }),
  ],
});

See

Custom Vite config

Referenced Types

PluginOption

PluginOption = VitePluginOptionValue | Promise<VitePluginOptionValue>

A Vite plugin, or a (possibly nested, possibly async) array of them.

This is a simplified version of Vite's PluginOption type, which is what you pass in the plugins array of your Vite config.

---

VitePluginOptionValue

VitePluginOptionValue = { name: string; } | false | null | undefined | PluginOption[]

A Vite plugin object (simplified to its required name), a falsy value (which Vite ignores), or an array of PluginOptions.