babel-plugin-glslify

2.0.0 verified Sat Apr 25 auth: no javascript

A Babel transform plugin that integrates glslify, allowing developers to import and inline GLSL shaders directly in JavaScript code using template literals. Version 2.0.0 is the latest stable release, targeting Node >=0.12. It enables ES6 syntax with glslify, supports tagged template strings for shader code, and works alongside other Babel transforms. Unlike the original browserify transform, this plugin is compatible with Babel-based build pipelines, making it a key tool for WebGL projects using modern JavaScript tooling. The package has no recent updates and relies on external glslify installation.

Common errors

error Error: Cannot find module 'glslify' ↓

cause glslify is not installed as a dependency.

fix

Run: npm install --save glslify

error SyntaxError: Unexpected identifier (while using require('glslify')) ↓

cause Using CommonJS require for the glslify module instead of ES import; template literals require a function call that is only handled correctly by the Babel transform with import statements.

fix

Replace const glsl = require('glslify') with import glsl from 'glslify'

error babel-plugin-glslify: Could not find plugin 'glslify'. Ensure it is installed. ↓

cause The plugin name is misspelled or not installed.

fix

Ensure babel-plugin-glslify is installed: npm install --save-dev babel-plugin-glslify, and add it to babel plugins as 'glslify' (not 'babel-plugin-glslify').

error TypeError: glsl is not a function ↓

cause glslify is imported incorrectly, possibly using default export from a CommonJS module.

fix

Use import glsl from 'glslify' and ensure your build tool supports ES module interop.

Warnings

gotcha glsl package must be installed separately as it is not bundled. Forgetting to install it will cause a 'Cannot find module' error. ↓

fix npm install --save glslify

gotcha CommonJS require('glslify') does not work for template literal syntax; must use ES import. ↓

fix Use import glsl from 'glslify' instead of require.

gotcha The plugin is designed for Babel 6 and may not be compatible with Babel 7+ without additional configuration due to plugin system changes. ↓

fix If using Babel 7, try using 'babel-plugin-glslify' with the 'legacy' decorator or upgrade to a newer plugin if available.

deprecated Package has not been updated since 2016 and may not support modern glslify features or Node versions. ↓

fix Consider using alternative bundler transforms like webpack-glslify-loader or rollup-plugin-glslify if encountering issues.

gotcha The plugin only processes .js files that use the glsl tagged template; it does not handle standalone .glsl files. ↓

fix Use glslify directly or a loader for standalone shader files if needed.

Install

npm install babel-plugin-glslify

yarn add babel-plugin-glslify

pnpm add babel-plugin-glslify

Imports

default import of glslify tagged template function
wrong
```
const glsl = require('glslify')
```
correct
```
import glsl from 'glslify'
```
Using ES module import is required for the tagged template literal syntax to work correctly with babel-plugin-glslify. CommonJS require may not preserve the template literal behavior.
Plugin configuration in babel config
wrong
```
plugins: ['babel-plugin-glslify']
```
correct
```
plugins: ['glslify']
```
Babel automatically resolves the 'babel-plugin-' prefix, so 'glslify' is sufficient. Using the full name may still work but is not the conventional short form.
Use with babelify transform in package.json
wrong
```
"transform": ["babelify", { "plugins": ["glslify"] }]
```
correct
```
"transform": [["babelify", { "plugins": ["glslify"] }]]
```
When specifying babelify with options in package.json transforms, it must be wrapped in an array inside the outer array. Missing the double array is a common mistake.

Quickstart

Basic setup showing import of glslify, configuration of the Babel plugin, and usage of a tagged template literal to process GLSL shader code.

// Install dependencies
// npm i -S glslify babel-plugin-glslify

// Add to .babelrc or babel config
// {
//   "plugins": ["glslify"]
// }

// In your JavaScript file
import glsl from 'glslify';

const vertexShader = glsl`
  #pragma glslify: noise = require(glsl-noise/simplex/2d)
  void main() {
    float brightness = noise(gl_FragCoord.xy);
    gl_FragColor = vec4(vec3(brightness), 1.0);
  }
`;

// Use the shader string in your WebGL program