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.
GlslShader
✓ import { GlslShader } from 'webpack-glsl-minify'
✗ const { GlslShader } = require('webpack-glsl-minify')
TypeScript type import; correct for type assertions on loaded GLSL modules
default (loader function)
✓ module.exports = { module: { rules: [{ test: /\.glsl$/, use: 'webpack-glsl-minify' }] } }
✗ import GlslLoader from 'webpack-glsl-minify'
This package exports a loader function by default; not meant to be directly imported in application code. Use via webpack config.
GlslVariable
✓ import { GlslVariable } from 'webpack-glsl-minify'
✗ import GlslVariable from 'webpack-glsl-minify'
Named export; type for uniform/constant variable descriptors
GlslVariableMap
✓ import { GlslVariableMap } from 'webpack-glsl-minify'
✗ import { GlslVariableMap } from 'webpack-glsl-minify/types'
Type export; no nested type path
Webpack configuration to load .glsl files with the loader, plus example usage with TypeScript type assertions and require.
// 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$/,
use: 'webpack-glsl-minify'
}
]
},
resolve: {
extensions: ['.glsl']
}
};
// src/myshader.glsl
@define PI 3.14159
uniform vec2 u_resolution;
void main() {
vec2 pos = gl_FragCoord.xy / u_resolution;
float color = sin(pos.x * PI);
gl_FragColor = vec4(color, 0.0, 0.0, 1.0);
}
// src/index.js
import { GlslShader } from 'webpack-glsl-minify';
import shader from './myshader.glsl';
const glsl = shader as GlslShader;
console.log(glsl.sourceCode);
console.log(glsl.uniforms);
console.log(glsl.consts);
// Or with require:
const shader2 = require('./myshader.glsl');
console.log(shader2.sourceCode);
console.log(shader2.uniforms);
console.log(shader2.consts);
Errors
Common errors & fixes
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
Webpack is not configured to process .glsl files.
fixAdd the loader rule: { test: /\.glsl$/, use: 'webpack-glsl-minify' } and include .glsl in resolve.extensions. TypeError: Cannot read properties of undefined (reading 'sourceCode')
The loaded GLSL module does not have a 'sourceCode' property, possibly because an older version of the loader returned a string.
fixUpgrade to the latest version of webpack-glsl-minify (>=1.0.0) and access glsl.sourceCode.
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Using dynamic require() on .glsl files in a way that webpack cannot resolve statically.
fixUse static import or require with a string literal: import shader from './myshader.glsl' or const shader = require('./myshader.glsl'). Audit
Dependencies
webpackrequiredpeer dependency required as loader; tested with webpack 4 and 5