{"id":14503,"library":"component-build","title":"Component Build","description":"component-build is a JavaScript package from the \"component\" ecosystem designed to bundle client-side web assets (scripts, styles, files) for browser deployment. Released around 2014, its stable version is 1.2.2. It acts as a wrapper around `component-builder2` and integrates with `component-resolver` to manage dependencies. Key features include transpilation of ES6 modules in source code, JSON parsing, template handling (as strings), automatic CSS autoprefixing, and URL rewriting for styles. For JavaScript, it supports optional UMD wrapping and autorequires the bundle entry point. The package primarily uses a callback-based API for its build processes. While it provided a structured way to build client-side applications within the 'component' framework, the 'component' package manager and its associated tools are largely obsolete, making `component-build` suitable mainly for maintaining legacy projects built within that specific ecosystem rather than new development. Its release cadence is effectively abandoned.","status":"abandoned","version":"1.2.2","language":"javascript","source_language":"en","source_url":"git://github.com/component/build.js","tags":["javascript"],"install":[{"cmd":"npm install component-build","lang":"bash","label":"npm"},{"cmd":"yarn add component-build","lang":"bash","label":"yarn"},{"cmd":"pnpm add component-build","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used to resolve component dependencies and construct the dependency tree.","package":"component-resolver","optional":false},{"reason":"The core logic for the build process; `component-build` is a thin wrapper around it.","package":"component-builder2","optional":false}],"imports":[{"note":"The package is CommonJS-only and uses `require`.","wrong":"import Build from 'component-build';","symbol":"Build","correct":"const Build = require('component-build');"},{"note":"This is a method on the `Build` instance, not a direct import. It utilizes an error-first callback pattern.","symbol":"build.scripts","correct":"build.scripts(function (err, string) { /* ... */ });"},{"note":"This can be overridden on both the constructor and prototype to customize script processing plugins. It's a property, not a function call.","symbol":"Build.scriptPlugins","correct":"Build.scriptPlugins = function (build, options) { /* ... */ };"}],"quickstart":{"code":"const resolve = require('component-resolver');\nconst Build = require('component-build');\nconst fs = require('fs');\n\nconst write = fs.writeFileSync;\n\nconst options = {\n  development: true,\n  install: true,\n  // Example for autoprefixer, if needed\n  browsers: ['last 2 versions', '> 1% in US'],\n  // Example for UMD wrap\n  umd: 'myBundleName'\n};\n\nresolve(process.cwd(), options, function (err, tree) {\n  if (err) {\n    console.error('Resolution Error:', err);\n    throw err;\n  }\n\n  const build = Build(tree, options);\n\n  build.scripts(function (err, string) {\n    if (err) {\n      console.error('Scripts Build Error:', err);\n      throw err;\n    }\n    if (string) {\n      console.log('Writing build.js');\n      write('build.js', string);\n    } else {\n      console.log('No scripts to build.');\n    }\n  });\n\n  build.styles(function (err, string) {\n    if (err) {\n      console.error('Styles Build Error:', err);\n      throw err;\n    }\n    if (string) {\n      console.log('Writing build.css');\n      write('build.css', string);\n    } else {\n      console.log('No styles to build.');\n    }\n  });\n\n  build.files(function (err) {\n    if (err) {\n      console.error('Files Build Error:', err);\n      throw err;\n    }\n    console.log('Files copied successfully.');\n  });\n});","lang":"javascript","description":"This example demonstrates how to use `component-build` to resolve dependencies and then build JavaScript, CSS, and copy files for a project, writing the output to disk. It showcases the core API for asset bundling."},"warnings":[{"fix":"Consider migrating away from the `component` ecosystem to modern build tools like Webpack, Rollup, or Vite if possible.","message":"The `component` package manager ecosystem, which `component-build` is a part of, is largely abandoned and incompatible with modern `npm`, `yarn`, or `pnpm` workflows. This package is primarily for maintaining legacy projects.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always use `const MyModule = require('my-module');` for importing `component-build` and its associated dependencies.","message":"This package is CommonJS-only and relies on `require()` for module imports. Attempting to use ES module `import` syntax will result in errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Wrap callback-based functions with `util.promisify` or custom Promise wrappers if modern async/await syntax is desired.","message":"All asynchronous operations within `component-build` utilize an error-first callback pattern. There is no built-in Promise-based or `async/await` compatible API.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Exercise caution when using this package in environments with strict security requirements or newer Node.js versions. Regular security audits are recommended for legacy projects.","message":"The internal dependencies, such as `component-builder2` and `component-resolver`, are also likely unmaintained, potentially leading to security vulnerabilities or compatibility issues with newer Node.js versions or underlying build tools.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Understand that 'ES6 Module support' means transpilation of application code, not a change in the package's own module system or API.","message":"While the README mentions \"ES6 Module support,\" this refers to the ability to transpile ES6 modules found *within* your source code, not that the `component-build` package itself is distributed as an ES module or fully supports the modern ES module loading specification.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use CommonJS `require` syntax: `const Build = require('component-build');`","cause":"Attempting to import `Build` using ES module syntax (e.g., `import Build from 'component-build';`).","error":"TypeError: Build is not a function"},{"fix":"Ensure `component-resolver` is correctly installed as a dependency within your project's `component.json` or equivalent setup, as per the `component` ecosystem's requirements.","cause":"The `component-resolver` package, a peer dependency, is not installed or cannot be resolved by the `component` tooling.","error":"Error: Cannot find module 'component-resolver'"},{"fix":"Ensure your build script that invokes `component-build` is run in a Node.js CommonJS environment. This package is designed to be run server-side to build browser assets.","cause":"Attempting to execute `component-build` or a script using `require()` in an ES module context (e.g., a file with `\"type\": \"module\"` in `package.json`) or a browser environment without a CommonJS loader.","error":"ReferenceError: require is not defined"},{"fix":"Add a `browsers` array or string to the `options` object, for example: `const options = { browsers: ['last 2 versions', '> 1%'] };`","cause":"The `autoprefixer` plugin (used for styles) requires a `browsers` option to specify target browser versions, which was not provided in the `options` object passed to `Build`.","error":"[CSS] autoprefixer: No browsers config specified"}],"ecosystem":"npm"}