{"id":20068,"library":"glslify-loader","title":"glslify-loader","description":"Webpack loader for glslify that inlines GLSL #include and source transforms. Current stable version 2.0.0, released 2018-05, no recent updates. Part of the stackgl ecosystem. Requires raw-loader to emit a string. Limited to webpack 4 and below; not compatible with webpack 5's asset modules. Alternatives: vite-plugin-glslify.","status":"maintenance","version":"2.0.0","language":"javascript","source_language":"en","source_url":"git://github.com/stackgl/glslify-loader","tags":["javascript","ecosystem:stackgl"],"install":[{"cmd":"npm install glslify-loader","lang":"bash","label":"npm"},{"cmd":"yarn add glslify-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add glslify-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Must be used before glslify-loader to output raw string; otherwise glslify-loader may receive a JS module.","package":"raw-loader","optional":true},{"reason":"Only tested with webpack 4; no webpack 5 compatibility.","package":"webpack","optional":false}],"imports":[{"note":"Must be used as a webpack loader, not a direct import. Use inline syntax or webpack config.","wrong":"const source = require('glslify-loader!./shader.glsl')","symbol":"glslify-loader","correct":"import source from 'raw-loader!glslify-loader!./shader.glsl'"},{"note":"Always include raw-loader before glslify-loader, or chain them properly.","wrong":"module.exports = { module: { rules: [ { test: /\\.glsl$/, loader: 'glslify-loader' } ] } }","symbol":"glslify-loader (config)","correct":"module.exports = { module: { rules: [ { test: /\\.(glsl|vs|fs|vert|frag)$/, use: ['raw-loader', 'glslify-loader'] } ] } }"},{"note":"Use 'options' (webpack 4+); 'query' is deprecated.","wrong":"use: [ 'raw-loader', { loader: 'glslify-loader', query: { transform: [...] } } ]","symbol":"options","correct":"use: [ 'raw-loader', { loader: 'glslify-loader', options: { transform: [['glslify-hex', {}]] } } ]"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(glsl|vs|fs|vert|frag)$/,\n        exclude: /node_modules/,\n        use: [\n          'raw-loader',\n          'glslify-loader'\n        ]\n      }\n    ]\n  }\n};\n\n// my-shader.glsl\n#version 300 es\nprecision highp float;\n#pragma glslify: noise = require('glsl-noise/simplex/3d')\nout vec4 outColor;\nuniform vec3 pos;\nvoid main() {\n  float n = noise(pos);\n  outColor = vec4(vec3(n), 1.0);\n}\n\n// app.js\nimport source from './my-shader.glsl';\nconsole.log(source); // string containing resolved GLSL","lang":"javascript","description":"Webpack configuration and example GLSL file using glslify-loader with a source transform, then importing the resolved shader string."},"warnings":[{"fix":"Downgrade to webpack 4 or use an alternative like vite-plugin-glslify.","message":"glslify-loader is not compatible with webpack 5. Use raw-loader with webpack 5 or migrate to a different loader.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Add 'raw-loader' before 'glslify-loader' in the loader chain.","message":"raw-loader is required before glslify-loader; omitting it causes the loader to receive a JavaScript module object instead of raw GLSL text.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Replace 'query' property with 'options' in loader configurations.","message":"The 'query' option is deprecated in webpack 4; use 'options' instead.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Install required transforms via npm and list them in the loader options.","message":"Source transforms (e.g., glslify-hex) must be installed separately; they are not bundled with glslify-loader.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use webpack's import syntax within a webpack-bundled project; do not run the file directly with Node.","message":"ESM import syntax for glsl files requires webpack 2+ and proper module rules; simple require('file.glsl') works in Node but not webpack.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install glslify-loader' and ensure webpack configuration includes node_modules in resolve.modules.","cause":"glslify-loader is not installed or not resolved in webpack's module paths.","error":"Module not found: Error: Can't resolve 'glslify-loader'"},{"fix":"Reorder loaders so 'raw-loader' comes before 'glslify-loader' in the use array.","cause":"The loader order is reversed; raw-loader should be first.","error":"Error: glslify-loader: 'raw-loader' must be placed before this loader in the chain."},{"fix":"Replace 'query' with 'options' in the loader object.","cause":"Using 'query' property in webpack 4+ loader configuration.","error":"TypeError: loader option 'query' is deprecated"},{"fix":"Install the transform package: 'npm install glslify-hex'.","cause":"The specified transform package is not installed.","error":"Error: Could not locate a Glslify transform 'glslify-hex'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}