vite-plugin-public-typescript

4.2.1 verified Mon Apr 27 auth: no javascript

Vite plugin that injects TypeScript code directly into HTML as inline scripts, transforming TypeScript to JavaScript during build. Current stable version is 4.2.1, with frequent releases following Vite major versions. Key differentiators: allows using TypeScript in public scripts without separate bundling, supports both development and production modes, and provides type-safe script injection. Requires Vite >=5 as peer dependency. Released under MIT license.

Common errors

error Error: No matching vite config found ↓

cause Plugin tried to detect Vite config but failed

fix

Ensure the plugin is called inside plugins array of Vite's defineConfig. If using a custom config file, specify via --config

error SyntaxError: Unexpected token 'export' ↓

cause Using CommonJS `require` to import the ESM-only plugin

fix

Change to ESM: use import syntax, or set "type": "module" in package.json

Warnings

breaking Version 4.x requires Vite >=5; incompatible with Vite 4.x ↓

fix Upgrade Vite to >=5, or use v3.x of the plugin with Vite 4

gotcha TypeScript files are evaluated in the browser; avoid importing Node.js modules ↓

fix Only use browser-compatible code in your TypeScript files

deprecated The `base` option is deprecated in v4; use Vite's `base` config instead ↓

fix Set `base` in Vite's defineConfig, not in plugin options

Install

npm install vite-plugin-public-typescript

yarn add vite-plugin-public-typescript

pnpm add vite-plugin-public-typescript

Imports

vitePluginPublicTypescript

wrong

const vitePluginPublicTypescript = require('vite-plugin-public-typescript')

correct

import vitePluginPublicTypescript from 'vite-plugin-public-typescript'

ESM-only package; default export is the plugin function

PluginOptions

wrong

import { PluginOptions } from 'vite-plugin-public-typescript'

correct

import type { PluginOptions } from 'vite-plugin-public-typescript'

Type only import to avoid bundling; plugin function accepts this type

vitePluginPublicTypescript

wrong

import { vitePluginPublicTypescript } from 'vite-plugin-public-typescript'

correct

import vitePluginPublicTypescript from 'vite-plugin-public-typescript'

Default export, not named export

Quickstart

Shows how to configure the plugin in vite.config.ts, injecting two TypeScript files into the HTML.

// vite.config.ts
import { defineConfig } from 'vite'
import vitePluginPublicTypescript from 'vite-plugin-public-typescript'

export default defineConfig({
  plugins: [
    vitePluginPublicTypescript({
      // Paths to TypeScript files to inject into HTML
      files: ['src/scripts/analytics.ts', 'src/scripts/init.ts'],
      // Optional: inject into specific HTML files
      htmlFiles: ['index.html'],
      // Optional: remove script tags after build
      removeScriptTags: false
    })
  ]
})