{"id":20870,"library":"worklet-loader","title":"worklet-loader","description":"Webpack loader that imports scripts as URLs for use with worklet modules (AudioWorklet, PaintWorklet, AnimationWorklet, etc.). Version 2.0.0 is the latest stable release. It is explicitly a fork of worker-loader and the maintainer advises caution as worker-specific behaviors may break worklets. Only works with webpack 3 or 4. No active development; likely obsolete once worker-loader supports worklets natively. Supports inline as Blob, custom filenames, and public path overrides.","status":"deprecated","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/reklawnos/worklet-loader","tags":["javascript"],"install":[{"cmd":"npm install worklet-loader","lang":"bash","label":"npm"},{"cmd":"yarn add worklet-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add worklet-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: requires webpack ^3.0.0, ^4.0.0-alpha.0, or ^4.0.0","package":"webpack","optional":false}],"imports":[{"note":"Worklet is loaded via inline loader syntax or webpack config rule. The default export is a string URL or Blob URL.","wrong":"import workletUrl from './worklet.js';","symbol":"default export (URL string)","correct":"import workletUrl from 'worklet-loader!./worklet.js';"},{"note":"The declaration must match the file extension used (e.g., .worklet.ts if using TypeScript).","wrong":"declare module '*.worklet.js' { const exportString: string; export default exportString; }","symbol":"TypeScript declaration","correct":"declare module '*.worklet.ts' { const exportString: string; export default exportString; }"},{"note":"When using require(), you must include the loader prefix.","wrong":"const workletUrl = require('./worklet.js');","symbol":"CommonJS require","correct":"const workletUrl = require('worklet-loader!./worklet.js');"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.worklet\\.js$/,\n        use: { loader: 'worklet-loader' }\n      }\n    ]\n  }\n};\n\n// App.js\nimport workletUrl from './file.worklet.js';\n\nconst audioCtx = new AudioContext();\naudioCtx.audioWorklet.addModule(workletUrl).then(() => {\n  console.log('Worklet registered');\n});","lang":"javascript","description":"Configures webpack to process .worklet.js files with worklet-loader, then imports a worklet file and registers it with AudioWorklet."},"warnings":[{"fix":"Use worker-loader if you need worklet support, or wait for official worklet support.","message":"Package is a fork of worker-loader and the author advises against using it. worker-loader may natively support worklets in the future.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Use webpack 4 or consider an alternative loader for webpack 5.","message":"The loader only works with webpack 3 or 4. Not compatible with webpack 5.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add a custom declaration file (e.g., typings/custom.d.ts) with declare module '*.worklet.ts' { const exportString: string; export default exportString; }","message":"When using TypeScript, you must declare a module for the worklet files, otherwise TypeScript will not recognize the import.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Avoid inline: true if your site has strict CSP, or adjust CSP to allow blob: URLs.","message":"The inline option creates a Blob URL, which may not work in some CSP (Content Security Policy) environments that restrict blob: URLs.","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":"Ensure your webpack config has a rule with test: /\\.worklet\\.js$/ and loader: 'worklet-loader'. Or use inline loader syntax: import url from 'worklet-loader!./file.js';","cause":"The file does not match the test pattern in webpack config, or the loader is not applied.","error":"Module parse failed: Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type."},{"fix":"Run npm install --save-dev worklet-loader","cause":"worklet-loader is not installed as a devDependency.","error":"Cannot find module 'worklet-loader'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}