vite-raw-plugin

1.0.2 verified Mon Apr 27 auth: no javascript

Vite Raw Plugin (v1.0.2) is a plugin for Vite that transforms any file type into a string, similar to webpack's raw-loader. It is primarily used to import non-code files like Markdown as strings for further processing (e.g., with markdown-it). The plugin has a small API surface: it accepts a single option `fileRegex` to match target files. It is maintained on GitHub but has low community adoption. Unlike alternatives like `vite-plugin-raw`, it requires explicit configuration and does not support code-splitting optimizations.

Common errors

error Cannot find module 'vite-raw-plugin' ↓

cause The package is not installed or not in node_modules.

fix

Run npm install vite-raw-plugin or yarn add vite-raw-plugin.

error TypeError: plugin is not a function ↓

cause Using CommonJS require to import an ESM-only plugin.

fix

Use ESM import syntax: import raw from 'vite-raw-plugin'.

error The requested module './file.md' does not provide an export named 'default' ↓

cause The fileRegex may not match the file, or the plugin is not configured correctly.

fix

Ensure the plugin is added to the Vite config and the fileRegex matches the file extension.

Warnings

gotcha The plugin only transforms files that match the provided fileRegex. Ensure the pattern is inclusive enough. ↓

fix Provide a regex that matches all file types you want to import as strings.

gotcha The plugin returns a default export string. Named exports from the file will not be available. ↓

fix Use default import syntax.

breaking No breaking changes have been reported in this minor version. ↓

fix No fix needed.

Install

npm install vite-raw-plugin

yarn add vite-raw-plugin

pnpm add vite-raw-plugin

Imports

default

wrong

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

correct

import markdownRawPlugin from 'vite-raw-plugin'

The plugin is ESM-only; CommonJS require will fail.

default
wrong
```
import * as content from './file.md'
```
correct
```
import content from './file.md'
```
Files matched by the plugin are exported as default string, not as a module namespace.

default

wrong

const { default: content } = require('./file.md')

correct

const content = require('./file.md')

In CommonJS, require returns the default export directly.

Quickstart

Configures vite-raw-plugin to import .md files as strings, then use them in components.

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import raw from 'vite-raw-plugin';

export default defineConfig({
  plugins: [
    vue(),
    raw({
      fileRegex: /\.md$/
    })
  ]
});