{"id":25462,"library":"esbuild-webgl","title":"esbuild-plugin-webgl","description":"ESBuild plugin that allows importing WebGL shaders from .glsl files directly into JavaScript or TypeScript projects. Currently at version 0.0.3, this plugin compresses GLSL code to reduce bundle size and promotes separation of concerns by keeping shaders in dedicated files rather than inline strings. It integrates with esbuild and tsup workflows, provides TypeScript type definitions, and supports common build configurations. Unlike manual shader loading or inline strings, this plugin automates shader compilation during the build step.","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-webgl","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-webgl","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-webgl","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for plugin to function","package":"esbuild","optional":true}],"imports":[{"note":"Named export, not default. Use {} destructuring.","wrong":"import webglPlugin from 'esbuild-plugin-webgl'","symbol":"webglPlugin","correct":"import { webglPlugin } from 'esbuild-plugin-webgl'"},{"note":"ESM-only package; CommonJS require() will not work. Use import syntax.","wrong":"const webglPlugin = require('esbuild-plugin-webgl')","symbol":"default","correct":"import { webglPlugin } from 'esbuild-plugin-webgl'"},{"note":"If types are needed at runtime, use value import; otherwise prefer type import to avoid runtime overhead.","wrong":"import { WebglPluginOptions } from 'esbuild-plugin-webgl'","symbol":"type import","correct":"import type { WebglPluginOptions } from 'esbuild-plugin-webgl'"}],"quickstart":{"code":"import { webglPlugin } from 'esbuild-plugin-webgl';\nimport esbuild from 'esbuild';\n\nawait esbuild.build({\n  entryPoints: ['src/index.ts'],\n  bundle: true,\n  outfile: 'dist/bundle.js',\n  plugins: [webglPlugin()],\n});\n\n// In your source file:\nimport vertexShader from './shaders/vertex.glsl';\nimport fragmentShader from './shaders/fragment.glsl';\n\nconst gl = 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);","lang":"typescript","description":"Demonstrates plugin setup with esbuild and importing .glsl files as strings."},"warnings":[{"fix":"Rename shader files to .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":"Switch to esbuild for builds, or use a different shader loading approach for other bundlers.","message":"Plugin only works with esbuild; not compatible with webpack, Rollup, or other bundlers without additional configuration.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use a separate unminified build for development, or disable compression if plugin options allow (not currently exposed).","message":"Plugin compresses shader code automatically; debugging with prettified shaders may be harder due to minification.","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":"Change to: import { webglPlugin } from 'esbuild-plugin-webgl'","cause":"Using default import instead of named import","error":"Error: The module 'esbuild-plugin-webgl' does not provide a default export"},{"fix":"Run: npm install esbuild-plugin-webgl --save-dev","cause":"Package not installed or used without proper bundler setup","error":"Cannot find module 'esbuild-plugin-webgl'"},{"fix":"Switch to ESM import: import { webglPlugin } from 'esbuild-plugin-webgl'","cause":"Using wrong import (e.g., const webglPlugin = require('esbuild-plugin-webgl')) with CommonJS","error":"TypeError: webglPlugin is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}