{"id":17539,"library":"compack","title":"Compack Web Component Bundler","description":"Compack is a command-line interface (CLI) tool designed to bundle Web Components by consolidating their individual HTML, CSS, and JavaScript files into a single distributable HTML file. This approach aimed to facilitate the packaging and distribution of components that could then be imported into web applications using HTML Imports. The package is currently at version 0.1.10. Given its last commit was approximately eight years ago and its core reliance on HTML Imports (which have been deprecated and removed from modern browsers), the project is no longer actively maintained and its output is not directly usable in contemporary web development without significant polyfilling or refactoring. Its key differentiator, the use of HTML Imports for component integration, is now a critical limitation.","status":"abandoned","version":"0.1.10","language":"javascript","source_language":"en","source_url":"https://github.com/rajasegar/compack","tags":["javascript","web","components","bundler","manager"],"install":[{"cmd":"npm install compack","lang":"bash","label":"npm"},{"cmd":"yarn add compack","lang":"bash","label":"yarn"},{"cmd":"pnpm add compack","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Compack is a global command-line tool, not a library intended for programmatic import into JavaScript or TypeScript files. Its functionality is accessed via shell commands.","symbol":"Compack CLI","correct":"npm install -g compack\ncompack --help"}],"quickstart":{"code":"npm install -g compack\n\n# Create boilerplate for a new component\ncompack --create my-first-component\n\n# Navigate into the component directory\ncd my-first-component\n\n# Install any component-specific dependencies (if package.json exists)\nnpm install\n\n# Build and bundle the component into a single HTML file\ncompack\n\n# Start a development server with live reload\ncompack --server\n\n# To use the component in an HTML file (note: relies on deprecated HTML Imports)\n// Add a test.html file in the parent directory of 'my-first-component.html'\n// and ensure webcomponents.min.js polyfill is accessible.\n/*\n\n\n \n \n Testing My Component\n \n \n \n \n \n \n\n*/","lang":"javascript","description":"Demonstrates global installation, component boilerplate generation, building a component, and starting a development server, highlighting its use of deprecated HTML Imports."},"warnings":[{"fix":"Modern Web Component development primarily uses ES Modules for component loading and dependency management. Developers should consider modern bundlers (e.g., Rollup, Webpack, Vite) and frameworks (e.g., Lit, Stencil) that natively support ES Modules for building and distributing Web Components. The `@webcomponents/html-imports` polyfill can be used for limited legacy support, but full browser support is not guaranteed.","message":"The primary output of Compack relies on HTML Imports (), which have been deprecated and removed from all major modern browsers (e.g., Chrome 73+). This makes components bundled by Compack largely unusable in current web environments without substantial polyfilling or refactoring to use ES Modules.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Migrate to actively maintained Web Component tools and libraries that embrace current web standards and best practices.","message":"The project appears to be abandoned, with no active development or updates since 2018. The last published version is 0.1.10. This implies no support for newer Web Component specifications or modern JavaScript features.","severity":"deprecated","affected_versions":"<=0.1.10"},{"fix":"Check for port conflicts before running the server. The documentation does not provide an option to configure a different port, so manual intervention or proxy setup might be required if conflicts occur.","message":"The `--server` option starts a development server on `http://localhost:8181`. This port might conflict with other local services or development servers.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Install `compack` globally using `npm install -g compack`.","cause":"The `compack` package was not installed globally or is not in the system's PATH.","error":"command not found: compack"},{"fix":"Ensure you are in the root directory of a component project created with `compack --create` or that a valid `component.json` file exists in the current working directory.","cause":"The `compack` command was run in a directory that does not contain a `component.json` configuration file, or the file is misspelled/missing.","error":"Error: Cannot find module 'component.json' or 'components.json'"},{"fix":"Start the development server with `compack --server` or ensure all file paths in your test HTML are correct relative to the location of the bundled component and polyfill scripts.","cause":"This error often occurs when the `compack` server is not running, or the HTML file attempting to import the component has an incorrect path to the bundled component or the `webcomponents.min.js` polyfill.","error":"Failed to load resource: net::ERR_FILE_NOT_FOUND (when loading .html or .js)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}