Dependency Config Variants

Dependencies are automatically configured for components through dependency policies. However, there are cases where a group of components requires its own explicit dependency configuration.

Component dependencies can be configured using the bit deps command, or alternatively, using the variants aspect (explored in this page).

In the example below, classnames is configured, via Variants,on all components under the ui namespace:

{
  "teambit.workspace/variants": {
    "{ui/**}": {
      "teambit.dependencies/dependency-resolver": {
        "policy": {
          "dependencies": {
            "classnames": "1.0.0"
          }
        }
      }
    }
  }
}
CopiedCopy

To validate a component is configured with the classnames dependency, run bit show COMPONENT_ID.
For example:

$ bit show ui/heading
CopiedCopy

The output lists classnames under the component's "dependencies":

┌───────────────────┬────────────────────────────────────────────────────────────┐
│ id                │ myorg.design/ui/button                                     │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ name              │ ui/heading                                                 │
├───────────────────┼────────────────────────────────────────────────────────────┤
module name       │ @myorg/design.ui.heading                                   │
├───────────────────┼────────────────────────────────────────────────────────────┤
│ dependencies      │ classnames@1.0.0- (package)├───────────────────┼────────────────────────────────────────────────────────────┤
......└───────────────────┴────────────────────────────────────────────────────────────┘
CopiedCopy
info

Components can be selected and configured via their relative directory path, or via their namespaces. To learn more, see 'Configuration variants'.

Dependencies can also be configured with component.json files. These can be ejected for any component in the Workspace with bit eject-conf.

For example:

bit eject-conf ui/heading
CopiedCopy
{
  "componentId": {
    "name": "ui/heading",
    "version": "1.0.0",
    "scope": "myorg.design"
  },
  "propagate": true,
  "extensions": {
    "teambit.dependencies/dependency-resolver": {
      "policy": {
        "dependencies": {
          "classnames": "1.0.0"
        }
      }
    }
  }
}
CopiedCopy

Remove a dependency

Using the - sign, components can be forced to ignore a specific dependency. This might be useful in cases where the dependency type has to be changed and in other special cases. For example, a dependency can be moved from dependencies to peerDependencies by removing it from dependencies and listing it under peerDependencies.

In the below example, we are telling the dependency resolved to ignore enzyme listed under standard, but continuing to use the version of enzyme listed under peerDependencies:

{
  "teambit.dependencies/dependency-resolver": {
    "policy": {
      "dependencies": {
        "enzyme": "-"
      },
      "peerDependencies": {
        "enzyme": "^3.11.0"
      }
    }
  }
}
CopiedCopy

Dev and peer dependencies

Components can also be configured to use dependencies of different types. Configuring either dev or peer dependencies to a component can be done using the devDependencies or peerDependencies properties.

In the example below, @testing-library/react is configured as a dev dependency:

{
  "@teambit.dependencies/dependency-resolver": {
    "policy": {
      "devDependencies": {
        "@testing-library/react": "^12.1.2"
      }
    }
  }
}
CopiedCopy

A component dependency policy will set the type and version of a component's dependency. If that dependency is not already listed in the component's dependency graph (this is usually automatically detected), it will be added.