{"id":22709,"library":"vite-plugin-inline-source","title":"Vite Plugin Inline Source","description":"A Vite plugin (v4.1.0) that inlines external file contents into HTML elements with the `inline-source` attribute. Actively maintained, with regular releases. Supports Vite 5, 6, and 7. Unlike `vite-plugin-singlefile`, this allows selective inlining per tag. Features include SVG optimization via SVGO, CSS optimization via CSSO, JS minification via Terser, and Sass compilation. Customization options for the inline attribute trigger, replacement tags, and optimization settings.","status":"active","version":"4.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/bienzaaron/vite-plugin-inline-source","tags":["javascript","vite","plugin","markup","inline","css","svg","typescript"],"install":[{"cmd":"npm install vite-plugin-inline-source","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-inline-source","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-inline-source","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required as the plugin runs in Vite's build pipeline.","package":"vite","optional":false}],"imports":[{"note":"Default import only; no named exports. CommonJS require fails in ESM-only contexts.","wrong":"const inlineSource = require('vite-plugin-inline-source')","symbol":"default","correct":"import inlineSource from 'vite-plugin-inline-source'"},{"note":"TypeScript type import only; not a runtime export. Use `import type` to avoid errors.","wrong":"import { InlineSourceOptions } from 'vite-plugin-inline-source'","symbol":"InlineSourceOptions","correct":"import type { InlineSourceOptions } from 'vite-plugin-inline-source'"},{"note":"The plugin is used as a function that returns a Vite Plugin object. No separate Plugin symbol.","wrong":"","symbol":"Plugin","correct":"import inlineSource from 'vite-plugin-inline-source'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport inlineSource from 'vite-plugin-inline-source';\n\nexport default defineConfig({\n  plugins: [\n    inlineSource({\n      // customize inline attribute (default: 'inline-source')\n      customAttribute: 'inline-source',\n      // tags whose contents are replaced entirely (default: ['svg', 'math'])\n      replaceTags: ['svg', 'math'],\n      // enable SVG optimization (default: true)\n      optimizeSvgs: true,\n      // enable CSS optimization (default: false)\n      optimizeCss: false,\n      // enable JS minification (default: false)\n      optimizeJs: false,\n      // enable Sass compilation (default: false)\n      compileSass: false\n    })\n  ]\n});","lang":"typescript","description":"Configures the vite-plugin-inline-source plugin with default options in a Vite config file."},"warnings":[{"fix":"Update Vite to 5.x, 6.x, or 7.x in your package.json.","message":"v4.0.0 dropped support for Vite versions older than 5.x. Existing v3 projects must upgrade Vite to 5.x or newer.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Review https://svgo.dev/docs/migrations/migration-from-v3-to-v4/ and update SVGO options accordingly.","message":"v4.0.0 upgraded SVGO from v3 to v4. SVGO v4 includes breaking changes. Refer to SVGO migration guide.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Upgrade Node.js to version 20 or later.","message":"v3.0.0 dropped support for Node.js 18. Existing projects on Node 18 must upgrade.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use `npm run build` and serve the output; the plugin does not affect `vite dev`.","message":"The plugin only inlines assets during the build (production) phase, not in dev mode. This is a common misunderstanding.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Node.js to 20+ or pin to vite-plugin-inline-source@2.x (which supports Node 18).","message":"Node.js 18 support was dropped in v3.0.0. Using Node 18 with v3+ will cause errors.","severity":"deprecated","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install the package: `npm install --save-dev vite-plugin-inline-source`. For TypeScript, ensure `node` module resolution is configured.","cause":"Package may not be installed, or TypeScript is not resolving the module correctly.","error":"Cannot find module 'vite-plugin-inline-source' or its corresponding type declarations."},{"fix":"Use `import inlineSource from 'vite-plugin-inline-source'`.","cause":"Using CommonJS `require` in an ES module context. The plugin is ESM-only.","error":"'require' is not defined in ES module scope; you can use import instead."},{"fix":"Verify the file path relative to the project root. Ensure the file is included in Vite's build scope.","cause":"The `src` attribute in HTML points to a file that does not exist or is not resolvable by Vite.","error":"Vite build fails with 'Error: Inline source not found: path/to/file.css'"},{"fix":"Use `import inlineSource from 'vite-plugin-inline-source'` (default import).","cause":"The import is incorrect, e.g., default import used as if exported as an object.","error":"TypeError: inlineSource is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}