{"id":26592,"library":"vite-plugin-glslify","title":"Vite Plugin Glslify","description":"A Vite plugin (v2.3.0, stable) that integrates glslify to compile GLSL shader code with #pragma glslify imports. It transforms tagged template literals (glsl`...`) and function calls (glsl(`...`)) in JavaScript/TypeScript files, as well as .glsl, .vert, .frag files. Ships TypeScript types. Unlike manual glslify CLI usage, it auto-plugs into Vite's dev server and build pipeline. Requires Vite ^5.2.9 || ^6.","status":"active","version":"2.3.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-glslify","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-glslify","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-glslify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vite plugin system","package":"vite","optional":false}],"imports":[{"note":"ESM default import; works with TypeScript.","symbol":"glslify (default)","correct":"import glslify from 'vite-plugin-glslify'"},{"note":"ESM-only package; CommonJS require will fail.","wrong":"const glslify = require('vite-plugin-glslify')","symbol":"glslify (named)","correct":"import { glslify } from 'vite-plugin-glslify'"},{"note":"Useful for extending the default file extensions.","symbol":"DEFAULT_EXTENSIONS","correct":"import { DEFAULT_EXTENSIONS } from 'vite-plugin-glslify'"},{"note":"glslify() returns a Plugin[] array, not a single plugin object.","wrong":"import { glslify } from 'vite-plugin-glslify'; export default { plugins: [glslify] }","symbol":"glslify function as plugin entry","correct":"import glslify from 'vite-plugin-glslify'; export default { plugins: [glslify()] }"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport glslify from 'vite-plugin-glslify';\n\nexport default defineConfig({\n  plugins: [glslify({\n    include: [/src\\/.*\\.(ts|js)$/],\n    exclude: ['node_modules/**'],\n    transformLiterals: true,\n    transformFiles: true,\n    extensions: [/\\.vert$/, /\\.frag$/, /\\.glsl$/],\n    options: {\n      transforms: [\n        ['glslify-hex', {}]\n      ]\n    }\n  })]\n});","lang":"javascript","description":"Configures vite-plugin-glslify with include/exclude patterns, options for transforming tagged literals and files, and passes transforms to glslify."},"warnings":[{"fix":"Update to vite-plugin-glslify@^2.0.0 and adjust vite.config.js to match new Options interface.","message":"v1 to v2: peer dependency changed from vite@^2 to vite@^5||^6, plugin options restructured (funcName, options object).","severity":"breaking","affected_versions":"<2.0.0"},{"fix":"Spread the result or assign directly: glslify() returns an array; Vite accepts arrays in plugins.","message":"The plugin returns an array of plugins (Plugin[]), not a single plugin. Using as a single plugin will cause Vite to ignore it.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Set transformLiterals: true or remove the option to use default.","message":"Tagged template literals are only transformed if transformLiterals is true (default). If you disable it, `glsl` tagged templates will remain unchanged.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use a regex pattern in funcName, e.g., /^glsl$/.","message":"The `funcName` option defaults to /glsl/ matching any function named glsl, but using a string like 'glsl' may match unintended functions in older versions.","severity":"deprecated","affected_versions":"<2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"npm install vite-plugin-glslify --save-dev and use ESM imports (import).","cause":"Package not installed or used in a CommonJS project (require).","error":"Cannot find module 'vite-plugin-glslify'"},{"fix":"Use import glslify from 'vite-plugin-glslify' or import { glslify } from 'vite-plugin-glslify'.","cause":"Named import used incorrectly; the plugin function is exported as default and named.","error":"TypeError: glslify is not a function"},{"fix":"Use default import: import glslify from 'vite-plugin-glslify'.","cause":"Importing 'glslify' as a named export from a version that only exports default (pre-v2).","error":"The requested module 'vite-plugin-glslify' does not provide an export named 'glslify'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}