Bit: Bit not tagging component

[rap0so]

Bit isnt tagging component

I've imported a bit component to another bit component and when i try to tag it returns an error, i've tried to remove the "duplicated" component from root package.json and from component package.json as the node_modules of both but the bit cli keep returning the same error, when i remove the call of "duplicated component" it works properly.

Code

./src/components/button.tsx

import Icon from '@bit/brainnit.components.icon';
// Icon is the "duplicated" component
import { faSpinner as spinnerIcon } from '@fortawesome/pro-light-svg-icons';
import React, { FC } from 'react';
import { Box } from 'reflexbox/styled-components';

import ButtonWrapper from './ButtonWrapper';
import { IButtonProps } from './types';

const Button: FC<IButtonProps> = ({ children, icon, isLoading, ...props }) => (
  <ButtonWrapper isLoading={isLoading} {...props}>
    {icon}

    <Box display="inline-block" ml={icon ? 2 : 0}>
      {isLoading ? <Icon icon={spinnerIcon} pulse={true} /> : children}
    </Box>
  </ButtonWrapper>
);

export default Button;

./package.json

...
  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "@bit/brainnit.components.avatar": "0.0.1",
    "@bit/brainnit.components.badge": "0.0.1",
    "@bit/brainnit.components.box": "0.0.2",
    "@bit/brainnit.components.button": "file:./src/components/button",
    "@bit/brainnit.components.card": "0.0.6",
    "@bit/brainnit.components.container": "0.0.1",
    "@bit/brainnit.components.drawer": "0.0.3",
    "@bit/brainnit.components.empty-state": "0.0.4",
    "@bit/brainnit.components.global-style": "0.0.2",
    "@bit/brainnit.components.icon": "0.0.9",
    "@bit/brainnit.components.label": "0.0.2",
    "@bit/brainnit.components.navbar": "0.0.2",
    "@bit/brainnit.components.placeholder": "0.0.4",
    "@bit/brainnit.components.progress-bar": "0.0.2",
    "@bit/brainnit.components.tag": "^0.0.1",
    "@bit/brainnit.components.text": "0.0.3",
    "@bit/brainnit.components.theme": "0.0.10",
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    "@fortawesome/pro-light-svg-icons": "^5.12.0",
    "@fortawesome/react-fontawesome": "^0.1.8",
    "@styled-system/css": "^5.1.4",
    "apollo-boost": "^0.4.7",
    "dayjs": "^1.8.18",
    "graphql": "^14.5.8",
    "humanize-duration": "^3.21.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-hotkeys-hook": "^1.5.4",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "reflexbox": "^4.0.6",
    "styled-components": "^4.4.1",
    "styled-system": "^5.1.4",
    "typescript": "3.7.2"
  },
...

Steps to Reproduce

1. Import Button component
2. Invoke Icon component on Button component code
3. Run bit add src/components/button --id button; bit tag button

Expected Behavior

Bit tag the component

Screenshots, exceptions and logs

If applicable, add screenshots, exceptions, and logs to help explain your problem.

Specifications

• Bit version: 14.7.2
• Node version: v10.16.3
• npm / yarn version: 1.21.1
• Platform: Windows 10
• Bit compiler (include version): bit.envs/compilers/[email protected]
• Bit tester (include version): bit.envs/testers/[email protected]

Additional context

Add any other context about the problem here.

[GiladShoham]

@rap0so Thanks for reporting this.
This looks like a bug, but we will need to dig deeper to understand it.
Can you please give me ([email protected]) and @davidfirst ([email protected]) read permission to your collection so we will be able to see the component?
Also, if you can run
bit cat-component brainnit.components/button
(you might need to specify the version like button@version, but you can try without it)
please try to run it once without the require icon and once with it, and paste here the
dependencies and flattenDependencies values.

Last (probably unrelated) question, is why did you run bit add src/components/button after the import?
Once you import a component you don't have to add it, it's already tracked by bit.

[luqezman]

Hi @GiladShoham, my teammate @rap0so is off this week so the tasks now is assigned to me.

Here is the first command ouputs:

{
    "name": "button",
    "scope": "brainnit.components",
    "versions": {
        "0.0.1": "6701a8aa1e4870faadfa3542dfed7fbb9f95412a",
        "0.0.2": "ffbc49f3b6df29fca1cf532e13617e30cb5eed5e",
        "0.0.3": "67e7aec88cf3dd582cf47da435576a190b62dade",
        "0.0.4": "e0a27765726e9a3ec39e3c6d125c5e78a4f50273",
        "0.0.5": "1b393cff5c5e12d691639e83e6abb0f2402d698b",
        "0.0.6": "d1228a369b48248e9d132f4f0a7f13bab0a329a2",
        "0.0.7": "20b1a3dccd068c5a7a063dbb7ef0a1bec93a68ed",
        "0.0.8": "032b9c2997d994ecb8acb967d16202d184b12255",
        "0.0.9": "4295e2a1ee918abd8b24de8f0f3d652b968bbd8b",
        "0.0.10": "62c3bba12094f9642c790b3a3f90351c1efbce6b",
        "0.0.11": "07052798831a5dd58edd382023e7610e012fca15",
        "0.0.12": "cdbf9958b1696d5074d11fe8a6fd116cc9465151",
        "0.0.13": "9d80ee425a525e267e78ca780450b0c5873bbf18",
        "0.0.14": "636260f061d851c26876f11fb56221c2482ec1ea",
        "0.0.15": "0989dd71c17d88d434f870bb55b0bf40c8f8749d",
        "0.0.16": "df891635fe1379dc8bffa50a9293261cfe725d73",
        "0.0.17": "16a278e862f275e2820696969d8cfd69f1706551"
    },
    "lang": "javascript",
    "deprecated": false,
    "bindingPrefix": "@bit",
    "remotes": [
        {
            "url": "ssh://[email protected]:brainnit.components",
            "name": "brainnit.components",
            "date": "1573759751022"
        }
    ]
}

please try to run it once without the require icon and once with it, and paste here the

Should I remove Icon inside from my component?

Last (probably unrelated) question, is why did you run bit add src/components/button after the import?
Once you import a component you don't have to add it, it's already tracked by bit.

Forget about that.

[luqezman]

Already added both(@GiladShoham @davidfirst ) as developer or you guys need admin permission?

[davidfirst]

@luqezman , thanks, looks like I'm added, but I don't see the specific collection. Can you please add us to the collection?

[luqezman]

Done @davidfirst

[davidfirst]

Thanks @luqezman , I'm able to import the component, but still missing permission of one of the packages. Could you please send me an email to [email protected] ? it'll be easier to communicate.
From a quick look, it seems to be related to the fact that this Icon component is required form the types file, but I'm not sure yet.
Also, there is a chance that the fix https://github.com/teambit/bit/pull/2269 will resolve your issue as well.

[luqezman]

Thanks @luqezman , I'm able to import the component, but still missing permission of one of the packages. Could you please send me an email to [email protected] ? it'll be easier to communicate.
From a quick look, it seems to be related to the fact that this Icon component is required form the types file, but I'm not sure yet.
Also, there is a chance that the fix #2269 will resolve your issue as well.

@rap0so see #2269

[luqezman]

@davidfirst should I update bit version or typescript version? Our currently specifications:

• Bit version: 14.7.2
• Node version: v10.16.3
• npm / yarn version: 1.21.1
• Platform: Windows 10
• Bit compiler (include version): bit.envs/compilers/[email protected]
• Bit tester (include version): bit.envs/testers/[email protected]

[davidfirst]

@luqezman , your Bit version is up to date, my previous fix was not released yet.
Maybe updating the typescript version could help, but I highly doubt it.
The only thing that prevents me to reproduce the issue is the error 404 I get from npm about @fortawesome. Any chance you could provide me with an access to the package?

[luqezman]

@FortAwesome is a private component from fontawesome.com. Can I send an email with token for you?

Here is how you can install https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

[davidfirst]

@luqezman , yes please. my email is [email protected]. Thanks.

[davidfirst]

I was able to reproduce the issue. The PR above fixes it.

Here is what happened.
Due to a bug in the ts compiler, when tagging a component, it generates package.json in the dists dir with the previous version of the component. See here for more info: https://github.com/teambit/envs/issues/85.
The component Button requires Icon in two places. One of them resolved to the source of Icon and the second resolved to the dists of Icon. As a result, Bit assumed that Button has two different dependencies, [email protected] and [email protected]. In a later phase, when resolving the dependencies version, both were changed to 0.0.3 and created this duplication.

[luqezman]

Thanks for quickly response @davidfirst I did the fix yesterday using new version of compiler <3 you guys are incredible <3