Dependency Configuration

Component dependency configuration enables you to modify the dependency graph of specific groups of components. This modification overrides Bit's auto-detection of dependencies, and the workspace dependency policy.

Component dependency configurations are set on components manually or programmatically, and may include packages, as well as components.

Set dependencies

Run the following to set a component with a dependency:

$bit
Copiedcopy
See command synopsis

Use the deps command alias for shorter commands (e.g, bit deps set apps/to-do classnames)

The output notifies classnames@2.3.2 was added to the dependency graph of apps/to-do. The specific package version defaults to the latest when no version is specified.

successfully updated dependencies

changed components
my-org.tasks-scope/apps/to-do

added packages
{
"classnames": "2.3.2
}

Note that setting a dependency makes it part of the component's dependency graph, regardless of whether it is actually being used by that component (unlike dependency policies, which only affect components that use the dependencies listed in the policies).

Multiple dependencies can be configured simultaneously by providing a list of packages, separated by spaces:

$bit
Copiedcopy

Semver version or range

To add a dependency with a specific semver version or range, run the following:

$bit
Copiedcopy

Set multiple components using a glob pattern

Run the following to set a group of components with a dependency, using a glob pattern for component IDs:

$bit
Copiedcopy

The output lists the components affected by this dependency configuration:

successfully updated dependencies

changed components
teambit.design/content/carousel
teambit.design/content/collapsible-content

added packages
{
"lodash": "4.17.21
}

Note that the dependency configuration is temporarily written into the .bitmap file, but is removed from that file, and persisted in the component snap once the component is snapped.

Dev dependencies

Dev dependencies are dependencies that are used only during development. A dependency is defined as a 'dev dependency' if it's only used by the component's dev files (e.g, test files, documentation files, composition files, etc.).

In addition to that, a dependency can be configured as a dev dependency, regardless of the component files using it:

$bit
Copiedcopy
See command synopsis

Run the following to verify the dependency was properly added:

$bit
Copiedcopy

The output lists the dependency as a dev dependency:

┌───────────────────┬───────────────────────────────────────────────────────────┐
id │ my-org.tasks-scope/apps/to-do
├───────────────────┼───────────────────────────────────────────────────────────┤
dev dependencies │ lodash@4.17.21------------------------- (package)
└───────────────────┴───────────────────────────────────────────────────────────┘

Peer dependencies

Peer dependencies are dependencies that are expected to be included in a component's host application. Since peer dependencies play a special "public role" in an app, such as the medium of communication between modules or the app's global state, they are required to exist in just a single instance, a single version.

$bit
Copiedcopy
See command synopsis

Run the following to verify the dependency was properly added:

$bit
Copiedcopy

The output lists the dependency as a dev dependency:

┌───────────────────┬───────────────────────────────────────────────────────────┐
id │ my-org.tasks-scope/apps/to-do
├───────────────────┼───────────────────────────────────────────────────────────┤
peer dependencies │ @material-ui/core@^4.0.0-------- (package)
└───────────────────┴───────────────────────────────────────────────────────────┘

It is recommended to set peer dependencies via the components' env, for consistency across components of the same type.

Update dependencies

Run the following to list all available updates:

$bit
Copiedcopy
See command synopsis

The output lists all outdated (direct) external dependencies, as well as the workspace components using them. Select the components to update using the space key and execute the command using the return key.

● @teambit/design.info.icon-text (runtime) 0.0.8 ❯ 0.0.10 because of my-org.tasks-scope/apps/to-do@0.0.5
○ @teambit/design.inputs.input-text (runtime) 0.0.2 ❯ 1.0.9 because of my-org.tasks-scope/apps/to-do@0.0.5

Remove dependencies

Run the following to remove a dependency from a component:

$bit
Copiedcopy
See command synopsis

Remove dependencies from multiple components

Select multiple components using a glob pattern to remove their dependencies:

$bit
Copiedcopy
See command synopsis

Set dependencies programmatically

Configure dependencies via envs

Configure dependencies via envs to standardize component dependencies. That's especially useful when setting peer dependencies, like react and react-dom, or when adding dependencies needed for the components' compilation, like @babel/runtime.

Create a new env or extend an existing env (learn more in the docs for you env of choice). Implement the following method:

getDependencies(component: any): Promise<DependencyList>
CopiedCopy

For example:

import { DependenciesEnv } from '@teambit/envs';

export class MyEnv implements DependenciesEnv {
  // ...

  async getDependencies() {
    return {
      dependencies: {
        /* remove 'react' as a regular dependency */
        react: '-',
      },
      devDependencies: {
        '@types/react': '^16.9.43',
        '@babel/runtime': '7.19.0',
      },
      peerDependencies: {
        react: '^16.18.0',
        'react-dom': '^16.18.0',
      },
    };
  }
}
CopiedCopy

Configure dependencies via aspects

Run the following to create an aspect:

$bit
Copiedcopy

Use the dependency resolver's API to set dependencies:

import { DependencyResolverAspect, DependencyResolverMain } from '@teambit/dependency-resolver';

export class MyAspect {
  static dependencies = [DependencyResolverAspect];
  static provider([depResolver]: [DependencyResolverMain]) {
    dependencyResolver.registerDependenciesPolicies([
      {
        dependencies: {
          classnames: '1.0.0'
        }
      }
    ]);
    return new MyAspect();
  }
}
...
CopiedCopy