Component Build

Common errors

• TypeError: Build is not a function

  cause Attempting to import `Build` using ES module syntax (e.g., `import Build from 'component-build';`).
  fix Use CommonJS `require` syntax: `const Build = require('component-build');`

• Error: Cannot find module 'component-resolver'

  cause The `component-resolver` package, a peer dependency, is not installed or cannot be resolved by the `component` tooling.
  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.

• ReferenceError: require is not defined

  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.
  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.

• [CSS] autoprefixer: No browsers config specified

  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`.
  fix Add a `browsers` array or string to the `options` object, for example: `const options = { browsers: ['last 2 versions', '> 1%'] };`

Warnings

• breaking 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.
  Fix: Consider migrating away from the `component` ecosystem to modern build tools like Webpack, Rollup, or Vite if possible.
• gotcha This package is CommonJS-only and relies on `require()` for module imports. Attempting to use ES module `import` syntax will result in errors.
  Fix: Always use `const MyModule = require('my-module');` for importing `component-build` and its associated dependencies.
• gotcha All asynchronous operations within `component-build` utilize an error-first callback pattern. There is no built-in Promise-based or `async/await` compatible API.
  Fix: Wrap callback-based functions with `util.promisify` or custom Promise wrappers if modern async/await syntax is desired.
• gotcha 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.
  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.
• gotcha 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.
  Fix: Understand that 'ES6 Module support' means transpilation of application code, not a change in the package's own module system or API.

Install

• npm install component-build npm
• yarn add component-build yarn
• pnpm add component-build pnpm

Imports

• Build
  wrong:

  import Build from 'component-build';

  correct:

  const Build = require('component-build');

  The package is CommonJS-only and uses `require`.
• build.scripts

  build.scripts(function (err, string) { /* ... */ });

  This is a method on the `Build` instance, not a direct import. It utilizes an error-first callback pattern.
• Build.scriptPlugins

  Build.scriptPlugins = function (build, options) { /* ... */ };

  This can be overridden on both the constructor and prototype to customize script processing plugins. It's a property, not a function call.

Quickstart

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.

const resolve = require('component-resolver');
const Build = require('component-build');
const fs = require('fs');

const write = fs.writeFileSync;

const options = {
  development: true,
  install: true,
  // Example for autoprefixer, if needed
  browsers: ['last 2 versions', '> 1% in US'],
  // Example for UMD wrap
  umd: 'myBundleName'
};

resolve(process.cwd(), options, function (err, tree) {
  if (err) {
    console.error('Resolution Error:', err);
    throw err;
  }

  const build = Build(tree, options);

  build.scripts(function (err, string) {
    if (err) {
      console.error('Scripts Build Error:', err);
      throw err;
    }
    if (string) {
      console.log('Writing build.js');
      write('build.js', string);
    } else {
      console.log('No scripts to build.');
    }
  });

  build.styles(function (err, string) {
    if (err) {
      console.error('Styles Build Error:', err);
      throw err;
    }
    if (string) {
      console.log('Writing build.css');
      write('build.css', string);
    } else {
      console.log('No styles to build.');
    }
  });

  build.files(function (err) {
    if (err) {
      console.error('Files Build Error:', err);
      throw err;
    }
    console.log('Files copied successfully.');
  });
});