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.
default
✓ import vertexShader from 'shader.vs';
✗ const vertexShader = require('shader.vs');
ESM import works with Webpack 2/3 + babel or TypeScript; require works in CJS context.
none (loader)
✓ module.exports = { module: { rules: [ { test: /\.(glsl|vs|fs)$/, loader: 'shader-loader', options: { glsl: { chunkPath: 'path/to/chunks' } } } ] } };
✗ module.exports = { module: { rules: [ { test: /\.glsl$/, loader: 'shader-loader' } ] } };
Options are required for chunk resolution; without chunkPath, $include will fail.
none (chunk syntax)
✓ void main() { $noise }
✗ void main() { #include "noise.glsl" }
Uses $filename syntax, not C-style #include. File must be in chunkPath directory.
Sets up Webpack config to load .glsl/.vs/.fs files with shader-loader, including chunk path. Then imports a vertex shader in JavaScript.
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' },
module: {
rules: [
{
test: /\.(glsl|vs|fs)$/,
loader: 'shader-loader',
options: {
glsl: {
chunkPath: path.resolve(__dirname, 'glsl/chunks')
}
}
}
]
}
};
// src/vertex.vs
void main() { gl_Position = vec4(position, 1.0); }
// src/index.js
import vertexShader from './vertex.vs';
console.log(vertexShader);
Errors
Common errors & fixes
Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.
Shader file is not being processed by shader-loader; webpack config missing or incorrect rule.
fixEnsure webpack config includes { test: /\.(glsl|vs|fs)$/, loader: 'shader-loader' } and loader is installed. ERROR in ./src/shader.vs Module build failed: Error: ENOENT: no such file or directory, open '.../glsl/chunks/snoise.glsl'
Chunk include ($snoise) cannot find the file in the specified chunkPath.
fixCreate the chunk file (e.g., snoise.glsl) in the directory specified by chunkPath option.
throw new Error('shader-loader only supports webpack 2 and 3');
Trying to use shader-loader with Webpack 4 or 5.
fixDowngrade to webpack@3 or use an alternative loader like raw-loader.
Audit
Dependencies
webpackrequiredWebpack loader; compatible with Webpack 2 and 3 only.