rollup-shader-chunks

1.5.2 verified Mon Apr 27 auth: no javascript

A Rollup plugin for optimising inline GLSL shaders in JavaScript or TypeScript files. Current stable version is 1.5.2, with a moderate release cadence. It processes template literals marked with a GLSL hint (e.g., `/* glsl */`), enabling shader minification and injection of uniform/attribute definitions directly in your bundle. Unlike generic GLSL loaders, this plugin focuses on inline shader strings within existing JS files, integrating seamlessly with Rollup's build pipeline. It supports Rollup 3 and 4, requiring Node.js ^20.19.0, ^22.21.0, or >=24.12.0. The plugin is configurable via include/exclude globs and an enabled flag.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/rollup-shader-chunks/index.js not supported. ↓

cause The package is ESM-only and cannot be loaded with CommonJS require().

fix

Use import { shaderChunks } from 'rollup-shader-chunks' or enable ESM in your project (e.g., type: 'module' in package.json).

error TypeError: shaderChunks is not a function ↓

cause Default import used instead of named import.

fix

Replace import shaderChunks from 'rollup-shader-chunks' with import { shaderChunks } from 'rollup-shader-chunks'.

error Module build failed: Error: The plugin 'shaderChunks' must be called with a options object or nothing. ↓

cause Calling shaderChunks() with a function or null argument.

fix

Call shaderChunks({ include: ['**/*.js'] }) or shaderChunks() with no arguments.

Warnings

breaking Node.js version requirement changed in v1.5.0: requires ^20.19.0, ^22.21.0, or >=24.12.0. Older Node versions (e.g., 18.x, 20.0-20.18) are no longer supported. ↓

fix Upgrade Node.js to a supported version: ^20.19.0, ^22.21.0, or >=24.12.0.

breaking Package is ESM-only. Using require('rollup-shader-chunks') throws ERR_REQUIRE_ESM. ↓

fix Use import { shaderChunks } from 'rollup-shader-chunks' or use dynamic import if in CommonJS context.

deprecated The 'createShaderChunks' export was deprecated in v1.4.0 and may be removed. Use 'shaderChunks' instead. ↓

fix Replace import { createShaderChunks } with import { shaderChunks }.

gotcha Shader comments /* glsl */ must be exactly as shown. Variations like /*glsl*/ (no space) or // glsl will not be recognized. ↓

fix Use the exact comment syntax: `/* glsl */` before the template literal.

gotcha The plugin does not support external GLSL files; it only processes inline strings within JavaScript/TypeScript files. ↓

fix For external files, use a GLSL loader plugin (e.g., rollup-plugin-glsl) instead.

gotcha TypeScript types are not bundled; you must install @types/rollup-shader-chunks separately or use the package's own types if provided. ↓

fix Check if the package includes types via exports; otherwise define your own or use skipLibCheck.

Install

npm install rollup-shader-chunks

yarn add rollup-shader-chunks

pnpm add rollup-shader-chunks

Imports

shaderChunks
wrong
```
import shaderChunks from 'rollup-shader-chunks'
```
correct
```
import { shaderChunks } from 'rollup-shader-chunks'
```
The plugin exports a named function, not a default export. Use named import syntax.
ShaderChunksOptions
wrong
```
import { ShaderChunksOptions } from 'rollup-shader-chunks'
```
correct
```
import type { ShaderChunksOptions } from 'rollup-shader-chunks'
```
TypeScript users should use 'import type' to avoid runtime side effects. This is a type-only export.
createShaderChunks
wrong
```
const createShaderChunks = require('rollup-shader-chunks')
```
correct
```
import { createShaderChunks } from 'rollup-shader-chunks'
```
The package is ESM-only. CommonJS require() will throw an error. Use dynamic import if needed.

Quickstart

Sets up the plugin in a Rollup config, processes inline GLSL shaders marked with /* glsl */ comment.

// Install: npm i rollup-shader-chunks --save-dev
// rollup.config.js
import { shaderChunks } from 'rollup-shader-chunks';

export default {
  input: 'src/index.js',
  plugins: [
    shaderChunks({
      include: ['**/*.js'],
      exclude: ['**/*.min.js'],
      enabled: true
    })
  ],
  output: {
    dir: 'dist',
    format: 'es'
  }
};

// src/index.js
const vertexShader = /* glsl */ `
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;