{"id":25427,"library":"esbuild-plugin-webgl","title":"esbuild-plugin-webgl","description":"ESBuild plugin for loading WebGL shaders from .glsl files (v0.0.3, unstable). Provides easy integration of GLSL shader imports into JavaScript/TypeScript projects using esbuild or tsup. Key differentiators: automatic shader compression for smaller bundles, TypeScript type declarations included, and support for both esbuild and tsup out of the box. Currently in early development with limited documentation and few releases. Not recommended for production use.","status":"active","version":"0.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/react18-tools/esbuild-plugin-webgl","tags":["javascript","ESBuild","WebGL","WebGL shaders","WebGL loader","GLSL","shader","ESBuild plugin","loaders","typescript"],"install":[{"cmd":"npm install esbuild-plugin-webgl","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-webgl","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-webgl","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Named export; default import does not exist. TypeScript types are included.","wrong":"import webglPlugin from 'esbuild-plugin-webgl'","symbol":"webglPlugin","correct":"import { webglPlugin } from 'esbuild-plugin-webgl'"},{"note":"Use import type for type-only imports. Options type is exported for configuration.","wrong":"","symbol":"WebglPluginOptions","correct":"import type { WebglPluginOptions } from 'esbuild-plugin-webgl'"},{"note":"GLSL files are imported as default string exports; CommonJS require will fail at runtime.","wrong":"const vertexShader = require('./shaders/vertex.glsl')","symbol":"Shaders","correct":"import vertexShader from './shaders/vertex.glsl'"}],"quickstart":{"code":"import { webglPlugin } from 'esbuild-plugin-webgl';\nimport { build } from 'esbuild';\n\nawait build({\n  entryPoints: ['src/index.ts'],\n  bundle: true,\n  outfile: 'dist/bundle.js',\n  plugins: [webglPlugin()],\n});\n\n// In src/index.ts:\nimport vertexShader from './shaders/vertex.glsl';\nimport fragmentShader from './shaders/fragment.glsl';\n\nconst gl = document.createElement('canvas').getContext('webgl');\nconst vs = gl.createShader(gl.VERTEX_SHADER);\ngl.shaderSource(vs, vertexShader);\ngl.compileShader(vs);\nconst fs = gl.createShader(gl.FRAGMENT_SHADER);\ngl.shaderSource(fs, fragmentShader);\ngl.compileShader(fs);\nconst program = gl.createProgram();\ngl.attachShader(program, vs);\ngl.attachShader(program, fs);\ngl.linkProgram(program);","lang":"typescript","description":"Shows basic esbuild configuration with webglPlugin and how to import/use GLSL shader files."},"warnings":[{"fix":"Pin exact version and test thoroughly before upgrading.","message":"Plugin is in early development (v0.0.3). API may change without notice. Not production-ready.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Rename shader files to use .glsl extension.","message":"GLSL files must use .glsl extension. Other extensions like .vert, .frag are not supported.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Do not rely on shader source formatting; use separate source maps if needed.","message":"Imported shader strings are minified/compressed. Original formatting removed.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Use with esbuild or tsup build tools. For other bundlers, look for alternative plugins.","message":"Plugin only works with esbuild and tsup. Not compatible with webpack, rollup, or parcel.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Add `plugins: [webglPlugin()]` to esbuild build options.","cause":"Missing webglPlugin in esbuild plugins configuration.","error":"Error: No loader is configured for \".glsl\" files: src/shaders/vertex.glsl"},{"fix":"Run `npm install esbuild-plugin-webgl` or `yarn add esbuild-plugin-webgl`.","cause":"Package not installed or missing type definitions.","error":"Cannot find module 'esbuild-plugin-webgl' or its corresponding type declarations."},{"fix":"Use `import { webglPlugin } from 'esbuild-plugin-webgl'` and call as `webglPlugin()`.","cause":"Incorrect import or missing call.","error":"TypeError: webglPlugin is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}