vite-plugin-sri

0.0.2 verified Mon Apr 27 auth: no javascript

A Vite plugin that adds Subresource Integrity (SRI) hashes to script and stylesheet imports in index.html at build time. Version 0.0.2 is current. Forked from @small-tech/vite-plugin-sri to fix an issue where dynamic imports were not handled correctly. Unlike the original, this plugin processes assets after Vite's build transformation, ensuring correct integrity hashes for dynamically imported modules. Released under ISC license.

Common errors

error Error: The plugin 'vite-plugin-sri' requires Vite >=2.0.0 ↓

cause Installing plugin with an older Vite version that does not support the required hooks.

fix

Upgrade Vite to version 2.0.0 or later, or downgrade the plugin if possible.

error TypeError: sri is not a function ↓

cause Using named import instead of default import or using CommonJS require incorrectly.

fix

Use import sri from 'vite-plugin-sri' (default import).

error Error: Integrity mismatch for 'app.js' ↓

cause The computed hash does not match the integrity attribute in the HTML, likely due to content changes after build.

fix

Rebuild the project to regenerate hashes based on current file content.

Warnings

gotcha Only affects build output, not dev server. SRI hashes are only added during production builds. ↓

fix Run `npx vite build` to generate SRI-enabled output.

gotcha Plugin may not work if Vite's renderBuiltUrl or other asset manipulation hooks alter script/src attributes after plugin runs. ↓

fix Ensure this plugin is placed after any plugins that modify script/style paths.

gotcha Integrity hashes are computed based on the final built file content; if files are served from a CDN, ensure the CDN serves the exact same file or the hash will mismatch. ↓

fix Use same build artifacts for both hash computation and deployment.

Install

npm install vite-plugin-sri

yarn add vite-plugin-sri

pnpm add vite-plugin-sri

Imports

sri

wrong

const sri = require('vite-plugin-sri')

correct

import sri from 'vite-plugin-sri'

ESM-only; no named export, default export only

defineConfig
```
import { defineConfig } from 'vite'
```
Vite's utility for config, not part of this plugin but commonly used together
sri()
wrong
```
plugins: [new sri()]
```
correct
```
plugins: [sri()]
```
sri is a function that returns a plugin object, not a class

Quickstart

Minimal Vite config to enable SRI hashing on all script and stylesheet imports.

// vite.config.js
import { defineConfig } from 'vite';
import sri from 'vite-plugin-sri';

export default defineConfig({
  plugins: [sri()]
});