vite-plugin-raw

1.0.3 verified Fri May 01 auth: no javascript

Transforms any file type (e.g., SVG, CSS, text) into an imported string in Vite. Currently at version 1.0.3, stable but minimal maintenance. Differentiates from raw-loader or ?raw suffix by offering a plugin-based approach with regex match and exclude patterns, allowing selective file transformation without query strings.

Common errors

error TypeError: vitePluginRaw is not a function ↓

cause Using named import instead of default import.

fix

Use import vitePluginRaw from 'vite-plugin-raw'

error ERR_MODULE_NOT_FOUND: Cannot find package 'vite-plugin-raw' ↓

cause Package not installed or missing from devDependencies.

fix

Run npm install -D vite-plugin-raw

error The requested module '...icon.svg' does not provide an export named 'default' ↓

cause vite-plugin-raw not configured or not transforming that file.

fix

Check that the plugin is added to Vite config and match regex covers .svg.

Warnings

gotcha match regex must be correctly scoped; overly broad patterns may transform unwanted files. ↓

fix Use specific regex like /\.(svg|txt)$/ and add exclude patterns for directories.

breaking Exclude paths must be absolute or regex; relative paths may not work. ↓

fix Use path.resolve(__dirname, 'dir') for exclude entries.

gotcha Only transforms files imported via ES modules; dynamic imports may not work. ↓

fix Use static import statements for transformed files.

Install

npm install vite-plugin-raw

yarn add vite-plugin-raw

pnpm add vite-plugin-raw

Imports

default

wrong

const vitePluginRaw = require('vite-plugin-raw')

correct

import vitePluginRaw from 'vite-plugin-raw'

ESM default import is preferred; CJS require also works.

default

wrong

import { vitePluginRaw } from 'vite-plugin-raw'

correct

const vitePluginRaw = require('vite-plugin-raw')

This package has a default export, not a named export.

vitePluginRaw
wrong
```
import { raw } from 'vite-plugin-raw'
```
correct
```
import vitePluginRaw from 'vite-plugin-raw'
```
Common misconception: the exported function is named vitePluginRaw.

Quickstart

Configure vite-plugin-raw to import SVG files as strings, excluding node_modules.

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

export default defineConfig({
  plugins: [
    vitePluginRaw({
      match: /\.svg$/,
      exclude: [new RegExp('node_modules')]
    })
  ]
});

// main.js
import svgContent from './icon.svg';
console.log(svgContent); // string