Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
glslify-loader
✓ import source from 'raw-loader!glslify-loader!./shader.glsl'
✗ const source = require('glslify-loader!./shader.glsl')
Must be used as a webpack loader, not a direct import. Use inline syntax or webpack config.
glslify-loader (config)
✓ module.exports = { module: { rules: [ { test: /\.(glsl|vs|fs|vert|frag)$/, use: ['raw-loader', 'glslify-loader'] } ] } }
✗ module.exports = { module: { rules: [ { test: /\.glsl$/, loader: 'glslify-loader' } ] } }
Always include raw-loader before glslify-loader, or chain them properly.
options
✓ use: [ 'raw-loader', { loader: 'glslify-loader', options: { transform: [['glslify-hex', {}]] } } ]
✗ use: [ 'raw-loader', { loader: 'glslify-loader', query: { transform: [...] } } ]
Use 'options' (webpack 4+); 'query' is deprecated.
Webpack configuration and example GLSL file using glslify-loader with a source transform, then importing the resolved shader string.
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(glsl|vs|fs|vert|frag)$/,
exclude: /node_modules/,
use: [
'raw-loader',
'glslify-loader'
]
}
]
}
};
// my-shader.glsl
#version 300 es
precision highp float;
#pragma glslify: noise = require('glsl-noise/simplex/3d')
out vec4 outColor;
uniform vec3 pos;
void main() {
float n = noise(pos);
outColor = vec4(vec3(n), 1.0);
}
// app.js
import source from './my-shader.glsl';
console.log(source); // string containing resolved GLSL
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'glslify-loader'
glslify-loader is not installed or not resolved in webpack's module paths.
fixRun 'npm install glslify-loader' and ensure webpack configuration includes node_modules in resolve.modules.
Error: glslify-loader: 'raw-loader' must be placed before this loader in the chain.
The loader order is reversed; raw-loader should be first.
fixReorder loaders so 'raw-loader' comes before 'glslify-loader' in the use array.
TypeError: loader option 'query' is deprecated
Using 'query' property in webpack 4+ loader configuration.
fixReplace 'query' with 'options' in the loader object.
Error: Could not locate a Glslify transform 'glslify-hex'
The specified transform package is not installed.
fixInstall the transform package: 'npm install glslify-hex'.
Audit
Dependencies
raw-loaderoptionalMust be used before glslify-loader to output raw string; otherwise glslify-loader may receive a JS module.
webpackrequiredOnly tested with webpack 4; no webpack 5 compatibility.