Inspecting Dependencies

Dependencies in the UI

Head over to the 'Dependencies' tab in the UI (run bit start) to review your components' dependencies:


Note that this graph only includes other components (see the 'Code' tab to review all dependencies).

Review direct dependencies

Run the following to review your component's direct dependencies:

$bit
Copiedcopy
See command synopsis

The output includes all dependency types (regular/dev/peer) and labels each as 'package' or 'component':

┌───────────────────┬───────────────────────────────────────────────────────────┐
id │ my-org.tasks-scope/apps/to-do
├───────────────────┼───────────────────────────────────────────────────────────┤
dependencies │ core-js@^3.0.0- (package)
├───────────────────┼───────────────────────────────────────────────────────────┤
dev dependencies │ @types/testing-library__jest-dom@5.9.5- (package)
│ @babel/runtime@7.12.18----------------- (package)
│ @types/jest@^26.0.0-------------------- (package)
│ @types/react-dom@^17.0.5--------------- (package)
│ @types/react@^17.0.8------------------- (package)
│ @types/node@12.20.4-------------------- (package)
├───────────────────┼───────────────────────────────────────────────────────────┤
peer dependencies │ @testing-library/react@^12.1.5- (package)
│ react-dom@^16.8.0 || ^17.0.0--- (package)
│ react@^16.8.0 || ^17.0.0------- (package)
└───────────────────┴───────────────────────────────────────────────────────────┘

Run the following to understand the factors the determine your component's dependency graph:

$bit
Copiedcopy
See command synopsis

The output is similar to the following:

{
  "components": [
    {
      "id": {
        "scope": "teambit.design",
        "name": "info/icon-text",
        "version": "0.0.8"
      },
      "dependencyPackageJsonPath": "path/to/package.json",
      "componentIdResolvedFrom": "DependencyPkgJson",
      "packageName": "@teambit/design.info.icon-text",
      "versionResolvedFrom": "Model",
      "version": "0.0.8"
    },
    {
      "id": {
        "scope": "teambit.design",
        "name": "inputs/input-text",
        "version": "0.0.2"
      },
      "dependencyPackageJsonPath": "path/to/package.json",
      "componentIdResolvedFrom": "DependencyPkgJson",
      "packageName": "@teambit/design.inputs.input-text",
      "versionResolvedFrom": "Model",
      "version": "0.0.2"
    }
  ],
  "manuallyRemovedDependencies": {
    "dependencies": ["react-dom", "react"],
    "devDependencies": ["react"],
    "peerDependencies": ["@testing-library/react"]
  },
  "manuallyAddedDependencies": {
    "dependencies": ["core-js@^3.0.0"],
    "devDependencies": [
      "@types/testing-library__jest-dom@5.9.5",
      "@babel/runtime@7.12.18",
      "@types/jest@^26.0.0",
      "@types/react-dom@^17.0.5",
      "@types/react@^17.0.8",
      "@types/node@12.20.4"
    ],
    "peerDependencies": [
      "react-dom@^16.8.0 || ^17.0.0",
      "react@^16.8.0 || ^17.0.0"
    ]
  },
  "missingPackageDependencies": [],
  "coreAspects": ["teambit.react/react"]
}
CopiedCopy

Review the full dependency graph

Run the following to review your component's full dependency graph:

$bit
Copiedcopy
See command synopsis

The output is similar to the following:

Dependencies originated from workspace Dependencies Details ╔══════════════════════════════════════════════════════╤═══════╤═══════════════════════════════════════════╤═════════════════╗ ║ Dependency ID │ Depth │ Immediate Dependent │ Dependency type ║ ╟──────────────────────────────────────────────────────┼───────┼───────────────────────────────────────────┼─────────────────╢ ║ teambit.design/info/icon-text@0.0.8 │ 1 │ my-org.tasks-scope/apps/to-do@0.0.5 │ prod ║ ╟──────────────────────────────────────────────────────┼───────┼───────────────────────────────────────────┼─────────────────╢ ║ teambit.design/inputs/input-text@0.0.2 │ 1 │ my-org.tasks-scope/apps/to-do@0.0.5 │ prod ║ ╟──────────────────────────────────────────────────────┼───────┼───────────────────────────────────────────┼─────────────────╢ ║ teambit.design/typography/text@0.0.15 │ 2 │ teambit.design/info/icon-text@0.0.8 │ prod ║ ╟──────────────────────────────────────────────────────┼───────┼───────────────────────────────────────────┼─────────────────╢ ║ ... │ ... │ ... │ ... ║ ╟──────────────────────────────────────────────────────┼───────┼───────────────────────────────────────────┼─────────────────╢ ║ teambit.design/ui/layouts/sections/left-right@1.95.6 │ 4 │ teambit.base-react/navigation/link@2.0.27 │ dev ║ ╚══════════════════════════════════════════════════════╧═══════╧═══════════════════════════════════════════╧═════════════════╝ Dependencies originated from scope Dependencies Details ╔═══════════════════════════════════════════════════════════════════════════╤═══════╤═════════════════════════════════════════════════════════════╤═════════════════╗ ║ Dependency ID │ Depth │ Immediate Dependent │ Dependency type ║ ╟───────────────────────────────────────────────────────────────────────────┼───────┼─────────────────────────────────────────────────────────────┼─────────────────╢ ║ teambit.design/info/icon-text@0.0.8 │ 1 │ my-org.tasks-scope/apps/to-do@0.0.5 │ prod ║ ╟───────────────────────────────────────────────────────────────────────────┼───────┼─────────────────────────────────────────────────────────────┼─────────────────╢ ║ teambit.design/inputs/input-text@0.0.2 │ 1 │ my-org.tasks-scope/apps/to-do@0.0.5 │ prod ║ ╟───────────────────────────────────────────────────────────────────────────┼───────┼─────────────────────────────────────────────────────────────┼─────────────────╢ ║ teambit.base-ui/theme/dark-theme@1.0.2 │ 2 │ teambit.design/inputs/input-text@0.0.2 │ dev ║ ╟───────────────────────────────────────────────────────────────────────────┼───────┼─────────────────────────────────────────────────────────────┼─────────────────╢ ║ ... │ ... │ ... │ ... ║ ╟───────────────────────────────────────────────────────────────────────────┼───────┼─────────────────────────────────────────────────────────────┼─────────────────╢ ║ teambit.base-ui/theme/colors@0.5.9 │ 16 │ teambit.base-ui/theme/brand-definition@0.5.9 │ prod ║ ╚═══════════════════════════════════════════════════════════════════════════╧═══════╧═════════════════════════════════════════════════════════════╧═════════════════╝

Review dependents

Run the following to review your component's dependents:

$bit
Copiedcopy
See command synopsis

The output is similar to the following:

Dependents originated from workspace Dependents Details ╔════════════════════════════════════════════════════════════════════╤═══════╤═════════════════════════════════════════════════════════╤════════════════╗ ║ Dependent ID │ Depth │ Immediate Dependency │ Dependent type ║ ╟────────────────────────────────────────────────────────────────────┼───────┼─────────────────────────────────────────────────────────┼────────────────╢ ║ teambit.dependencies/content/configuring-dependencies@1.96.6 │ 1 │ teambit.community/ui/bit-cli/terminal@0.0.22 │ prod ║ ╟────────────────────────────────────────────────────────────────────┼───────┼─────────────────────────────────────────────────────────┼────────────────╢ ║ ... │ ... │ ... │ ... ║ ╟────────────────────────────────────────────────────────────────────┼───────┼─────────────────────────────────────────────────────────┼────────────────╢ ║ teambit.community/apps/bit-dev@1.96.33 │ 3 │ teambit.docs/ui/community-reference-docs@0.0.4 │ prod ║ ╚════════════════════════════════════════════════════════════════════╧═══════╧═════════════════════════════════════════════════════════╧════════════════╝ Dependents originated from scope Dependents Details ╔════════════════════════════════════════════════════════════════════╤═══════╤════════════════════════════════════════════════════════════════════╤════════════════╗ ║ Dependent ID │ Depth │ Immediate Dependency │ Dependent type ║ ╟────────────────────────────────────────────────────────────────────┼───────┼────────────────────────────────────────────────────────────────────┼────────────────╢ ║ teambit.dependencies/content/configuring-dependencies@1.96.6 │ 1 │ teambit.community/ui/bit-cli/terminal@0.0.22 │ prod ║ ╟────────────────────────────────────────────────────────────────────┼───────┼────────────────────────────────────────────────────────────────────┼────────────────╢ ║ ... │ ... │ ... │ ... ║ ╟────────────────────────────────────────────────────────────────────┼───────┼────────────────────────────────────────────────────────────────────┼────────────────╢ ║ teambit.component/content/snaps@1.96.8 │ 2 │ teambit.docs/content/getting-started/version-components@1.96.14 │ prod ║ ╚════════════════════════════════════════════════════════════════════╧═══════╧════════════════════════════════════════════════════════════════════╧════════════════╝