JSX custom factory and fragment configuration
Custom `jsxFactory` and `jsxFragment` can be configured using the `oxc` option for frameworks with custom JSX handling. Example: for Preact, configure `oxc: { jsx: { importSource: 'preact' } }`
general concepts
28 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
TypeScript transpilation is performed only, not type checking
Vite only performs transpilation on `.ts` files and does not perform type checking. Type checking is assumed to be handled by the IDE and build process.
Vite uses Oxc Transformer for TypeScript
Vite uses Oxc Transformer to transpile TypeScript into JavaScript, which is faster than vanilla `tsc`. HMR updates can reflect in the browser in under 50ms.
Use Type-Only Imports and Export syntax
Use the Type-Only Imports and Export syntax to avoid potential problems like type-only imports being incorrectly bundled. Example: `import type { T } from 'only/types'` and `export type { T }`
TypeScript isolatedModules must be set to true
The `isolatedModules` option in `tsconfig.json` under `compilerOptions` must be set to `true`. This is because Oxc transformer only performs transpilation without type information and doesn't support certain features like const enum and implicit type-only imports.
useDefineForClassFields defaults based on TypeScript target
The `useDefineForClassFields` default value will be `true` if the TypeScript target is `ES2022` or newer including `ESNext`, and `false` for other targets. This is consistent with TypeScript 4.3.2+ behavior.
Vite ignores tsconfig target in favor of build.target
Vite ignores the `target` value in `tsconfig.json`, following the same behavior as esbuild. Use `oxc.target` option to specify the target in dev (defaults to `esnext`), and `build.target` option for builds.
Vite client types include asset imports, env variables, and HMR API
The `vite/client` type definitions provide type shims for: asset imports (e.g. importing an `.svg` file), types for Vite-injected constants on `import.meta.env`, and types for the HMR API on `import.meta.hot`.
Add vite/client to tsconfig types
To shim the environment of client-side code, add `vite/client` to `compilerOptions.types` in `tsconfig.json`. Example: `"types": ["vite/client", "some-other-global-lib"]`
HTML files are entry points in Vite projects
HTML files stand front-and-center of a Vite project, serving as the entry points for applications. Any HTML files in the project root can be directly accessed by their respective directory path.
HTML elements with asset references are processed and bundled
Assets referenced by HTML elements such as `<script type="module" src>`, `<link href>`, `<img src>`, and many others are processed and bundled as part of the app.
JSX and TSX files supported out of the box
`.jsx` and `.tsx` files are supported out of the box. JSX transpilation is handled via Oxc Transformer.
Supported HTML elements for asset processing
The following HTML elements are supported for asset processing: `<audio src>`, `<embed src>`, `<img src>`, `<img srcset>`, `<image href>`, `<image xlink:href>`, `<input src>`, `<link href>`, `<link imagesrcset>`, `<object data>`, `<script type="module" src>`, `<source src>`, `<source srcset>`, `<track src>`, `<use href>`, `<use xlink:href>`, `<video src>`, `<video poster>`, and `<meta content>` with specific name or property attributes.
vite-ignore attribute disables HTML processing
Add the `vite-ignore` attribute on an HTML element to opt-out of HTML processing on that element. This can be useful when referencing external assets or CDN.
JSX helpers injection with jsxInject
JSX helpers can be injected using `jsxInject` (a Vite-only option) to avoid manual imports. Example: `oxc: { jsxInject: 'import React from "react"' }`
CSP nonce attribute added to script, style, and link tags
When `html.cspNonce` is set, Vite adds a nonce attribute with the specified value to any `<script>` and `<style>` tags, as well as `<link>` tags for stylesheets and module preloading.
CSP meta tag injection for nonce
When `html.cspNonce` is set, Vite will inject a meta tag `<meta property="csp-nonce" nonce="PLACEHOLDER" />`. The nonce value will be used by Vite whenever necessary during both dev and after build.
CSP nonce must be unique per request
Ensure that the CSP nonce placeholder is replaced with a unique value for each request. This is important to prevent bypassing a resource's policy.
CSP data URI required for inlined assets
By default, during build, Vite inlines small assets as data URIs. Allowing `data:` for related directives (e.g. `img-src`, `font-src`), or disabling inlining by setting `build.assetsInlineLimit: 0` is necessary for CSP compliance.
CSP script-src must not allow data URI
Do not allow `data:` for `script-src` CSP directive, as it will allow injection of arbitrary scripts.
Vite provides first-party framework integrations
All modern frameworks maintain integrations with Vite. Official Vue and React Vite plugins are maintained in the vite org, including @vitejs/plugin-vue, @vitejs/plugin-vue-jsx, @vitejs/plugin-react, @vitejs/plugin-react-swc, and @vitejs/plugin-rsc.
TypeScript resolveSourceMap option affects build
The `extends`, `importsNotUsedAsValues`, `preserveValueImports`, `verbatimModuleSyntax`, `jsx`, `jsxFactory`, `jsxFragmentFactory`, `jsxImportSource`, and `experimentalDecorators` compiler options in `tsconfig.json` affect the build result.
Vite respects closest parent tsconfig.json
For each file, Vite uses the closest parent `tsconfig.json` that matches the file, or a config referenced by its `references` field that matches the file. Vite treats a config as matching when the file satisfies the config's `files`, `include`, and `exclude` fields.
Vite config takes precedence over tsconfig options
When options are set in both the Vite config and `tsconfig.json`, the value in the Vite config takes precedence.
TypeScript emitDecoratorMetadata only partially supported
The `emitDecoratorMetadata` option in `tsconfig.json` is only partially supported in Vite. Full support requires type inference by the TypeScript compiler, which is not supported.
TypeScript paths option uses resolve.tsconfigPaths
To use the `paths` option in `tsconfig.json` to resolve imports, set `resolve.tsconfigPaths: true` in the Vite config. Note that this feature has a performance cost and is discouraged by the TypeScript team.
skipLibCheck recommended in starter templates
Vite starter templates have `skipLibCheck: true` by default to avoid typechecking dependencies, as they may choose to only support specific versions and configurations of TypeScript.
Type checking recommendations for development
For production builds, run `tsc --noEmit` in addition to Vite's build command. During development, if type checking is needed beyond IDE hints, run `tsc --noEmit --watch` in a separate process, or use vite-plugin-checker.