{"id":22948,"library":"vite-string-plugin","title":"vite-string-plugin","description":"A zero-dependency Vite plugin that allows importing files (SVG, MD, XML, TXT, or custom extensions) as raw strings at build time. Current stable version is 2.0.3 as of April 2025, requiring Vite >= 6.3.0 (or compatible rolldown-vite) due to hook filter API usage introduced in v2.0.0. It is more lightweight than generic file-loading plugins like rollup-plugin-string or vite-plugin-raw, but limited to string output. TypeScript type declarations are provided via a separate types entry point for automatic module augmentation of default file extensions.","status":"active","version":"2.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/silverwind/vite-string-plugin","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-string-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add vite-string-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-string-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: plugin requires Vite >= 6.3.0 (or rolldown-vite equivalent) for hook filter API","package":"vite","optional":false}],"imports":[{"note":"ESM-only package, no CommonJS support. Named export, not default.","wrong":"const { stringPlugin } = require('vite-string-plugin')","symbol":"stringPlugin","correct":"import { stringPlugin } from 'vite-string-plugin'"},{"note":"Type augmentation is done via types entry; do not import it as a module.","wrong":"import './vite-string-plugin/types'","symbol":"types","correct":"/// <reference types=\"vite-string-plugin/types\" />\nor in tsconfig.json: \"types\": [\"vite-string-plugin/types\"]"},{"note":"Files are exported as default string export; named or require will fail in ESM context.","wrong":"import { foo } from './foo.svg'; const data = require('./foo.svg')","symbol":"default import of file","correct":"import foo from './foo.svg'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport { stringPlugin } from 'vite-string-plugin';\n\nexport default defineConfig({\n  plugins: [\n    stringPlugin({\n      match: /\\.(svg|md|xml|txt)$/i\n    }),\n  ],\n});\n\n// src/example.ts\nimport svgContent from './icon.svg?raw'; // works only if match includes .svg\nconsole.log(svgContent); // string of the file content\n","lang":"typescript","description":"Sets up the plugin to load .svg files as strings and then imports one in a TypeScript module."},"warnings":[{"fix":"Upgrade Vite to 6.3.0 or later, or use vite-string-plugin@1.x (v1.0.5) with Vite < 6.3.0.","message":"vite-string-plugin@2.0.0 requires Vite >= 6.3.0 (or rolldown-vite equivalent) due to hook filter API usage. Older Vite versions will fail to load the plugin.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure the plugin is added to the Vite plugins array; HMR should work automatically for files matching the pattern. If not, try appending a query parameter like ?raw.","message":"Files imported via stringPlugin are not hot-reloaded in dev mode? (check if HMR works)","severity":"gotcha","affected_versions":"*"},{"fix":"Set match to a broader regex or use Vite's built-in ?raw query for specific files.","message":"The 'match' option default covers only .svg, .md, .xml, .txt. Customizing match may be needed for other extensions like .graphql or .html. The plugin does not handle query parameters like ?raw (but can be combined with Vite's ?raw).","severity":"deprecated","affected_versions":"*"},{"fix":"Add ambient type declarations for each custom extension as shown in the README.","message":"TypeScript type augmentation only applies to default extensions (.svg, .md, .xml, .txt). For custom extensions, you must add your own declare module statements.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use `import { stringPlugin } from 'vite-string-plugin'` instead of `const stringPlugin = require('vite-string-plugin')`.","cause":"Attempting to call require('vite-string-plugin') which returns an ESM module; it does not have a default export.","error":"TypeError: vite-string-plugin is not a function"},{"fix":"Upgrade Vite to >=6.3.0 or use vite-string-plugin@1.0.5.","cause":"Vite version < 6.3.0 does not support the hook filter API used by plugin v2.","error":"Plugin vite-string-plugin: filter is not a function"},{"fix":"Add `\"types\": [\"vite-string-plugin/types\"]` to tsconfig.json or create a .d.ts file with declare module statements.","cause":"Missing type augmentation for the imported file extension.","error":"TypeScript error: Cannot find module './foo.svg' or its corresponding type declarations."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}