Yarn deletes symlinks provided by bit.dev. How dare is he

Updated on: Sun Dec 20 2020

Known issues.

If you (like me) use yarn then most probably you will face another one mysterious problem. For example you have two components - one depends on other and you isolated both of them.

copied jsx

// @/ui/containers/Block/index.tsx
import styled from 'styled-components';
const Block = styled.div`
  box-sizing: border-box;
`;
export default Block;

// @/ui/containers/Flex/index.tsx
import styled from 'styled-components';
import Block from '@ui/containers/Block';
const Flex = styled(Block)`
  display: flex;
`;
export default Flex;

And you want your brand new Flex component in another project so you are gonna isolate and extract it

copied bash

bit add @/ui/containers/Flex
# bit suggests me to add Block as bit component as well so I do this
bit add @/ui/containers/Block
bit tag --all 1.0.0
# under the hood bit adds postintall script to Flex component which maps "@/ui/containers/Block" to "@bit/myname.my-col.block" for it to be perfectly resolved
# in other project I just do yarn add @bit/myname.my-col.flex
# profit

Problem comes on step 7 If I will do yarn add anything-else after I installed @bit/myname.my-col.flex and it created symlinks yarn will remove all the symlinks and it results in module @/ui/containers/Block can not be resolved. Bit team suggests to move here in two steps. First extract Block component. Then change your import of Block component in Flex to extracted to bit.dev Block.

copied ts/tsx

//import Block from '@/ui/containers/Block'
import Block from '@bit/myname.my-col.block'

And only after that extract Flex. In this way yarn will not delete any important symlinks because they will never be created.