Bit not tagging component #2260

rap0so · 2020-01-27T20:11:34Z

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

Import Button component
Invoke Icon component on Button component code
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/typescript@3.0.35
Bit tester (include version): bit.envs/testers/jest@22.4.3

Additional context

Add any other context about the problem here.

The text was updated successfully, but these errors were encountered:

GiladShoham · 2020-01-28T09:53:07Z

@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 (gilad@bit.dev) and @davidfirst (david@bit.dev) 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.

lucasmonstrox · 2020-01-29T13:10:47Z

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://bit@hub.bit.dev: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.

lucasmonstrox · 2020-01-29T13:19:08Z

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

davidfirst · 2020-01-29T14:25:17Z

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

lucasmonstrox · 2020-01-29T15:32:15Z

Done @davidfirst

davidfirst · 2020-01-29T16:47:26Z

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 david@bit.dev ? 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.

lucasmonstrox · 2020-01-30T09:47:40Z

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 david@bit.dev ? 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

lucasmonstrox · 2020-01-30T09:48:38Z

@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/typescript@3.0.35
Bit tester (include version): bit.envs/testers/jest@22.4.3

davidfirst · 2020-01-30T13:50:49Z

@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?

lucasmonstrox · 2020-01-30T14:21:01Z

@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 · 2020-01-30T15:31:42Z

@luqezman , yes please. my email is david@bit.dev. Thanks.

…ferent version in the main package.json and in the dist/package.json (relevant for typescript components)

davidfirst · 2020-01-30T21:03:26Z

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: teambit/envs#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, icon@0.0.2 and icon@0.0.3. In a later phase, when resolving the dependencies version, both were changed to 0.0.3 and created this duplication.

…ferent version in the main package.json and in the dist/package.json (relevant for typescript components) (#2271)

lucasmonstrox · 2020-01-31T13:55:05Z

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

rap0so added the type/bug label Jan 27, 2020

GiladShoham added priority/critical area/tag labels Jan 28, 2020

GiladShoham added this to the 14.8.0 milestone Jan 28, 2020

davidfirst added a commit that referenced this issue Jan 30, 2020

resolve #2260, fix duplicate dependencies when a dependency has a dif…

5fb4a64

…ferent version in the main package.json and in the dist/package.json (relevant for typescript components)

This was referenced Jan 30, 2020

fix duplicate dependencies #2271

Merged

package.json in dists has a different version than in src teambit/envs#85

Open

davidfirst closed this as completed in #2271 Jan 31, 2020

davidfirst added a commit that referenced this issue Jan 31, 2020

resolve #2260, fix duplicate dependencies when a dependency has a dif…

f69bd48

…ferent version in the main package.json and in the dist/package.json (relevant for typescript components) (#2271)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bit not tagging component #2260

Bit not tagging component #2260

rap0so commented Jan 27, 2020

GiladShoham commented Jan 28, 2020

lucasmonstrox commented Jan 29, 2020

lucasmonstrox commented Jan 29, 2020

davidfirst commented Jan 29, 2020

lucasmonstrox commented Jan 29, 2020

davidfirst commented Jan 29, 2020

lucasmonstrox commented Jan 30, 2020

lucasmonstrox commented Jan 30, 2020

davidfirst commented Jan 30, 2020

lucasmonstrox commented Jan 30, 2020 •

edited

Loading

davidfirst commented Jan 30, 2020

davidfirst commented Jan 30, 2020

lucasmonstrox commented Jan 31, 2020

Bit not tagging component #2260

Bit not tagging component #2260

Comments

rap0so commented Jan 27, 2020

Bit isnt tagging component

Code

Steps to Reproduce

Expected Behavior

Screenshots, exceptions and logs

Specifications

Additional context

GiladShoham commented Jan 28, 2020

lucasmonstrox commented Jan 29, 2020

lucasmonstrox commented Jan 29, 2020

davidfirst commented Jan 29, 2020

lucasmonstrox commented Jan 29, 2020

davidfirst commented Jan 29, 2020

lucasmonstrox commented Jan 30, 2020

lucasmonstrox commented Jan 30, 2020

davidfirst commented Jan 30, 2020

lucasmonstrox commented Jan 30, 2020 • edited Loading

davidfirst commented Jan 30, 2020

davidfirst commented Jan 30, 2020

lucasmonstrox commented Jan 31, 2020

lucasmonstrox commented Jan 30, 2020 •

edited

Loading