{"id":19069,"library":"babel-plugin-glslify","title":"babel-plugin-glslify","description":"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.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/mikolalysenko/glslify-babel","tags":["javascript","babel","glslify","stackgl","glsl","webgl"],"install":[{"cmd":"npm install babel-plugin-glslify","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-glslify","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-glslify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for processing GLSL shaders; plugin acts as Babel transform wrapper around glslify.","package":"glslify","optional":false}],"imports":[{"note":"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.","wrong":"const glsl = require('glslify')","symbol":"default import of glslify tagged template function","correct":"import glsl from 'glslify'"},{"note":"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.","wrong":"plugins: ['babel-plugin-glslify']","symbol":"Plugin configuration in babel config","correct":"plugins: ['glslify']"},{"note":"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.","wrong":"\"transform\": [\"babelify\", { \"plugins\": [\"glslify\"] }]","symbol":"Use with babelify transform in package.json","correct":"\"transform\": [[\"babelify\", { \"plugins\": [\"glslify\"] }]]"}],"quickstart":{"code":"// Install dependencies\n// npm i -S glslify babel-plugin-glslify\n\n// Add to .babelrc or babel config\n// {\n//   \"plugins\": [\"glslify\"]\n// }\n\n// In your JavaScript file\nimport glsl from 'glslify';\n\nconst vertexShader = glsl`\n  #pragma glslify: noise = require(glsl-noise/simplex/2d)\n  void main() {\n    float brightness = noise(gl_FragCoord.xy);\n    gl_FragColor = vec4(vec3(brightness), 1.0);\n  }\n`;\n\n// Use the shader string in your WebGL program","lang":"javascript","description":"Basic setup showing import of glslify, configuration of the Babel plugin, and usage of a tagged template literal to process GLSL shader code."},"warnings":[{"fix":"npm install --save glslify","message":"glsl package must be installed separately as it is not bundled. Forgetting to install it will cause a 'Cannot find module' error.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import glsl from 'glslify' instead of require.","message":"CommonJS require('glslify') does not work for template literal syntax; must use ES import.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"If using Babel 7, try using 'babel-plugin-glslify' with the 'legacy' decorator or upgrade to a newer plugin if available.","message":"The plugin is designed for Babel 6 and may not be compatible with Babel 7+ without additional configuration due to plugin system changes.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Consider using alternative bundler transforms like webpack-glslify-loader or rollup-plugin-glslify if encountering issues.","message":"Package has not been updated since 2016 and may not support modern glslify features or Node versions.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Use glslify directly or a loader for standalone shader files if needed.","message":"The plugin only processes .js files that use the glsl tagged template; it does not handle standalone .glsl files.","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 --save glslify","cause":"glslify is not installed as a dependency.","error":"Error: Cannot find module 'glslify'"},{"fix":"Replace const glsl = require('glslify') with import glsl from '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.","error":"SyntaxError: Unexpected identifier (while using require('glslify'))"},{"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').","cause":"The plugin name is misspelled or not installed.","error":"babel-plugin-glslify: Could not find plugin 'glslify'. Ensure it is installed."},{"fix":"Use import glsl from 'glslify' and ensure your build tool supports ES module interop.","cause":"glslify is imported incorrectly, possibly using default export from a CommonJS module.","error":"TypeError: glsl is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}