rollup-plugin-glslify

1.3.1 verified Mon Apr 27 auth: no javascript

A Rollup plugin that allows importing GLSL shader files (e.g., .glsl, .vert, .frag) as JavaScript strings, processed through glslify — a Node.js-style module system for GLSL. It supports include/exclude patterns, optional compression via glslify's minifier, and is TypeScript-compatible (ships types). Current stable is 1.3.1, with maintenance releases as needed. Differentiators: integrates glslify's modular shader system into Rollup builds, supports compression, and is part of the glslify ecosystem. Compared to raw string loaders, it resolves glslify imports and applies transforms.

Common errors

error Error: Cannot find module 'glslify' ↓

cause glslify is not installed or listed as a dependency.

fix

Run 'npm install glslify' alongside rollup-plugin-glslify.

error TypeError: glslify is not a function ↓

cause Wrong import style (named import) causing undefined.

fix

Use default import: import glslify from 'rollup-plugin-glslify'

error Module parse failed: Unexpected token (1:0) in file shader.glsl ↓

cause The plugin is not processing the .glsl file because it's not included.

fix

Add .glsl to the include option or verify the file extension matches the pattern.

error Error: Could not resolve './common.glsl' from 'shader.vert' ↓

cause glslify's relative imports are resolved relative to the file, not the project root.

fix

Check the import path in the GLSL file and ensure it exists.

Warnings

breaking In v1.x, the plugin switched from glslify's older stream API to a newer sync API. Existing configs using custom transforms may break. ↓

fix Update custom transforms to return a string directly instead of using through2.

deprecated The compress option still defaults to true, but glslify's built-in minifier may be slow for large shaders. Consider disabling compress in development. ↓

fix Set compress: false in development config, and only enable for production builds.

gotcha File extensions .vs, .fs, .vert, .frag, .glsl are included by default, but .vs and .fs may conflict with other asset loaders. ↓

fix Explicitly set include to only the extensions you need, e.g., include: ['**/*.glsl'].

gotcha The plugin does not produce source maps for the GLSL strings. Debugging compiled shaders may be difficult. ↓

fix Manually add source map support via a separate Rollup plugin or use glslify's --sourcemap flag.

Install

npm install rollup-plugin-glslify

yarn add rollup-plugin-glslify

pnpm add rollup-plugin-glslify

Imports

default

wrong

const glslify = require('rollup-plugin-glslify')

correct

import glslify from 'rollup-plugin-glslify'

ESM export only; named exports are not provided.

glslify

wrong

import { glslify } from 'rollup-plugin-glslify'

correct

import glslify from 'rollup-plugin-glslify'

The package exports a single default function, not a named export.

glslify with TypeScript
wrong
```
import * as glslify from 'rollup-plugin-glslify'
```
correct
```
import glslify from 'rollup-plugin-glslify'
```
TypeScript users: use default import. The module is declared with 'export default' in its types.

Quickstart

Shows a Rollup config using the plugin with include/exclude and compression, plus importing a .frag file.

// rollup.config.js
import glslify from 'rollup-plugin-glslify';
import { defineConfig } from 'rollup';

export default defineConfig({
  input: 'src/index.js',
  output: { dir: 'dist', format: 'es' },
  plugins: [glslify({
    include: ['**/*.glsl', '**/*.vert', '**/*.frag'],
    exclude: 'node_modules/**',
    compress: true // default: minify
  })]
});

// src/index.js
import frag from './shaders/example.frag';
console.log(frag); // GLSL string