Best Practice For Importing Another Bit Component to Avoid Ripple CI Failure

[gtwilliams03]

Description

Ripple CI fails when I import another of my Bit components when the underlying Bit component's version has been bumped.

Specifications

• Bit version: 1.6.126
• Node version: 21.4.0
• npm / yarn version: yarn 4.1.1
• Platform: MacOS

Context and additional information

I have a library in Bit in which several components are built on others. Lately I have been experiencing Ripple CI build failures when importing another of my Bit components:

import { timeZone } from '@severed-links/common.js'

const UserMenu = () => React component follows

I get Ripple CI build errors when I tag all of the updated components and bit export them:

No matching version found for @severed-links/common.js@0.0.34
This error happened while installing a direct dependency of /tmp/capsules-root/sign-capsules/2024-3-16/1j66qup/severed-links.common_user-menu@0.0.58
BitErrorWithRichMessage: No matching version found for @severed-links/common.js@0.0.34

But @severed-links/common.js does exist with that semver number:

I feel like I am doing something very dumb and I hesitated even raising the issue to bother you all, but I just can't figure out why I am getting these build errors simply trying to use another of my components.

[GiladShoham]

can you run bit show <comp-id> and check if you see the common/js in your dependencies? (you can also paste here the output)

[gtwilliams03]

This is what I see (and the common.js component is there?

┌───────────────────┬───────────────────────────────────────────────────────────────────────┐
│ id                │ severed-links.common/user-menu@0.0.60                                 │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ scope             │ severed-links.common                                                  │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ name              │ user-menu                                                             │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ env               │ severed-links.common/envs/my-react-bootstrap-env@0.0.19               │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ package name      │ @severed-links/common.user-menu                                       │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ deprecated        │ false                                                                 │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ main file         │ UserMenu.js                                                           │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ files             │ UserMenu.composition.js                                               │
│                   │ UserMenu.js                                                           │
│                   │ UserMenu.module.scss                                                  │
│                   │ UserMenuComposition.module.scss                                       │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ dev files         │ UserMenu.composition.js (teambit.compositions/compositions)           │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ aspects           │ severed-links.common/envs/my-react-bootstrap-env@0.0.19               │
│                   │ teambit.compilation/compiler                                          │
│                   │ teambit.component/dev-files                                           │
│                   │ teambit.compositions/compositions                                     │
│                   │ teambit.dependencies/dependency-resolver                              │
│                   │ teambit.docs/docs                                                     │
│                   │ teambit.envs/envs                                                     │
│                   │ teambit.harmony/application                                           │
│                   │ teambit.pipelines/builder                                             │
│                   │ teambit.pkg/pkg                                                       │
│                   │ teambit.preview/preview                                               │
│                   │ teambit.semantics/schema                                              │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ dependencies      │ @severed-links/common.breakpoints@0.0.19------- (component)           │
│                   │ @severed-links/common.colors@0.0.21------------ (component)           │
│                   │ @severed-links/common.font-awesome-icon@0.0.32- (component)           │
│                   │ @severed-links/common.js@0.0.36---------------- (component)           │
│                   │ @severed-links/common.user-list-item@0.0.38---- (component)           │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ dev dependencies  │ @severed-links/common.envs.my-react-bootstrap-env@0.0.19- (component) │
├───────────────────┼───────────────────────────────────────────────────────────────────────┤
│ peer dependencies │ lodash@^4.17.21---------- (package)                                   │
│                   │ react@^17.0.0 || ^18.0.0- (package)                                   │
│                   │ react-bootstrap@2.10.2--- (package)                                   │
└───────────────────┴───────────────────────────────────────────────────────────────────────┘

[gtwilliams03]

I am still battling with this. Every time I end up bumping the version of my common.js bit package, the other components that rely on that get out of sync with their dependencies:

No matching version found for @severed-links/common.js@0.0.38
This error happened while installing a direct dependency of /tmp/capsules-root/sign-capsules/2024-4-2/1g2ledc/severed-links.common_time-zone-picker@0.0.62
BitErrorWithRichMessage: No matching version found for @severed-links/common.js@0.0.38

And I get an error trying to update components in my apps:

% yarn add @severed-links/common.js@0.0.38
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0082: │ @severed-links/common.js@npm:0.0.38: No candidates found
➤ YN0000: └ Completed in 0s 331ms
➤ YN0000: · Failed with errors in 0s 346ms

[GiladShoham]

Are you running install directly with yarn? or bit install with yarn configured?

[gtwilliams03]

Bit install with yarn configured

[gtwilliams03]

I am still having this issue and I thought I would provide some additional examples. The Ripple build seems to fail when one of my Bit components imports another. This seems to happen when I update the child component. Here is an example of a recent build failure that I experienced:

The error message I received in the failing component log was:

No matching version found for @severed-links/common.user-menu@0.0.67
This error happened while installing a direct dependency of /tmp/capsules-root/sign-capsules/2024-6-12/1u39dnr/severed-links.common_champagne-honey-header@0.0.40

The UserMenu component built successfully in the image above (with version 0.0.67). In addition, I can see the version available in the menu for the component:

Any ideas as to what I am doing wrong? I am not getting any errors locally.

[gtwilliams03]

Also, I am now running bit version 1.7.41, yarn 4.3.1 (still on node 21.4.0).