rollup-plugin-inline-code

1.2.7 verified Mon Apr 27 auth: no javascript

A Rollup plugin that loads files as plain text strings, akin to Webpack's raw-loader, using a configurable import prefix (default 'inline!'). Version 1.2.7 is the current stable release, published via semantic-release with automated versioning. It supports Node.js 12–16 and works with JavaScript, TypeScript, SVG, and any text-based assets. The plugin integrates seamlessly into Rollup builds, enabling inline injection of file contents into generated bundles—a common pattern in server-side rendering or HTML template generation. Unlike similar plugins, it uses a distinctive import prefix syntax to differentiate inline imports from standard module imports.

Common errors

error Error: Could not resolve 'inline!./path/to/file.js' ↓

cause Rollup cannot resolve the module because the plugin is not properly configured or the prefix is missing.

fix

Ensure the plugin is added to the plugins array in rollup.config.js and that the import source starts with 'inline!'.

error Cannot find module 'rollup-plugin-inline-code' or its corresponding type declarations. ↓

cause Package is not installed or TypeScript type declarations are missing.

fix

Run 'npm install rollup-plugin-inline-code' and add a global module declaration for 'inline!*'.

error TS2307: Cannot find module 'inline!./file.svg' or its corresponding type declarations. ↓

cause TypeScript cannot resolve the module because the declaration is missing.

fix

Add 'declare module "inline!*" { const inlineCode: string; export default inlineCode; }' to a .d.ts file.

Warnings

gotcha The plugin only transforms imports with the configured prefix (default 'inline!'). Regular imports are unaffected. ↓

fix Always prepend the prefix to import sources intended for inlining.

gotcha TypeScript users must declare a module for 'inline!*' to avoid type errors. ↓

fix Add a global module declaration: declare module 'inline!*' { const inlineCode: string; export default inlineCode; }

gotcha The plugin returns a string, not a module; you cannot destructure or use named exports from the imported content. ↓

fix Use default import syntax: import x from 'inline!./file.js'

gotcha Semver range for peer dependency rollup is not specified; may break with future Rollup major versions. ↓

fix Check compatibility with your Rollup version; restrict to known working versions.

Install

npm install rollup-plugin-inline-code

yarn add rollup-plugin-inline-code

pnpm add rollup-plugin-inline-code

Imports

default export

wrong

const inlineCode = require('rollup-plugin-inline-code')

correct

import inlineCode from 'rollup-plugin-inline-code'

The package exports a single default function; named import is not supported.

Imported file content
wrong
```
import content from './path/to/file.js'
```
correct
```
import content from 'inline!./path/to/file.js'
```
Must use the 'inline!' prefix in the import source to trigger the plugin.

TypeScript type declaration

wrong

declare module 'inline!*' { export = string; }

correct

declare module 'inline!*' { const inlineCode: string; export default inlineCode; }

Required for TypeScript projects to avoid import errors. Place in a .d.ts file.

Quickstart

Shows basic Rollup setup with plugin and usage of the inline prefix to import a JavaScript file's raw content.

// rollup.config.js
import inlineCode from 'rollup-plugin-inline-code';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [inlineCode()]
};

// src/index.js
import scriptContent from 'inline!./inline.js';
console.log(scriptContent);

// src/inline.js
// This file will be read as text
const greeting = 'Hello from inline!';