Bit.dev unable to add 2 components with the same ID

Question

To manage my severals react components I decide to use bit . Then I add a component loginForm that is a directory with this structure:

├── loginForm
│   ├── loginForm.scss
│   └── loginForm.tsx

I use for that the cli command add :

bit add ./loginForm/*

But I get this error that I don't really understand:

unable to add 2 components with the same ID: login-form/login-form

As someone an idea ?

Answer 1

the only possible solution for me looks like to change one filename eg

├─loginForm
│  │  loginForm.tsx
│  │  loginForm.style.scss

Answer 2

Bit uses glob patterns to "find" files and create a set distinct add command, each to a set of files. So in this case, the use of a wildcard ( * ) in a folder with two files, returned 2 files to the bit add command to iterate over.

ie the syntax in the question is a "snippet" to run:

$ bit add loginForm/loginForm.tsx
$ bit add loginForm/loginForm.scss

With these two commands, Bit's default behavior is taking the file name to be tracked, and use it as the component name. So both cases it's login-form . Bit does not allow having two components with identical IDs.

To have Bit track the entire folder as a component you can omit the wildcard and run:

$ bit add ./loginForm

This way you tell Bit to track the entire directory as a single component, not tracking each individual file as a component.

It's also possible to group the results of a glob pattern to a single component using the --id option. This tells Bit to take all files found in the glob pattern and instead of running "many" bit add (for each file/directory), it runs a single one with a set component ID. For example:

$ bit add ./loginForm/* --id login-forum

This way it tells Bit to add all files in the ./loginForm directory to be tracked by a single component instance. Using the --id option you can also add files to that component even after it was tracked, as it tells Bit to add files to the mentioned component ID.

If you have several folders containing files and you want each folder to be a component and use a single command, then you can use the glob pattern.

├── LoginForm
│   ├── LoginForm.scss
│   └── LoginForm.tsx
└── LogoutForm
    ├── LogoutForm.scss
    └── LogoutForm.tsx

You could run:

$ bit add ./*

To have the glob pattern give bit add the two folders to track.