Error while Tagging the component with typescript

[uttam23]

Describe the bug

While trying to run the bit tag --all command for the first version of the component ,getting the following error .

⠀ **teambit.typescript/typescript, compile typescript components (1/1). base-ui/[email protected]
✖ /Users/uttam/Library/Caches/Bit/capsules/346cf4e76103ef106c4d9d60dc6f8edc73d0edfe/[email protected]/styles.ts:13:14 - error TS2742: The inferred type of 'cssStyle' cannot be named without a reference to '.pnpm/[email protected]/node_modules/jss'. This is likely not portable. A type annotation is necessary.
export const cssStyle = createUseStyles({

});**

Steps to Reproduce

1.using react-jss for css
`import { variantConstants } from "./constants";
import { createUseStyles } from "react-jss";

const commonProperties = (...values) => {
const [fontSize, fontWeight, lineHeight, letterSpacing] = values;
return {
fontSize,
fontWeight,
lineHeight: ${lineHeight}px,
letterSpacing,
};
};
export const cssStyle = createUseStyles({
/* Styles applied to the root element. */
root: {
margin: 0,
},

/* Styles applied to the root element if variant="h1". */
[variantConstants.H1]: commonProperties(42, 500, 56, "normal"),

});`

Expected Behavior

This error should not be coming and components should be tagged .
A clear and concise description of what you expected to happen.

Screenshots, exceptions and logs

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

Specifications

• Bit version: 0.0.562
• Workspace type: (harmony/legacy) : harmony
• Node version: v16.3.0
• npm / yarn version: 7.19.1
• Platform: reactjs

for harmony workspace

• relevant env : teambit.react/react
• relevant aspects

for leagacy

• Bit compiler (include version):
• Bit tester (include version):

Additional context

Add any other context about the problem here.

[ivansky]

I've just upgraded to latest bit

upgraded from version 0.0.559
current is now linked to version 0.0.577

and on both versions I have the same error. I didn't expect the issue to be created by someone else 20 hours ago,
so it looks like general typescript issue in bit.dev configuration.

Maybe it relates to microsoft/TypeScript#29808 (comment)

[ivansky]

I would imagine an example, but I am not sure if it's the reason.

module A

export function fnA() {
  return {
    anything: 'abc'
  }
}

// inferring type from implementation that does not come to declaration file
export const a = new ClassA<ReturnType<typeof fnA>>;

module B

import { fnA } from 'moduleA';

export const b = fnA();

[GiladShoham]

We faced this issue as well, and we need to look into it.
Meantime, something that might work is to change from pnpm to yarn in the workspae.jsonc under

"teambit.dependencies/dependency-resolver": {
    "packageManager": "teambit.dependencies/yarn",

It will be great if you can post here back if it solves the issue. so we can have more info about it.
Thanks.

[ivansky]

Hi @GiladShoham it does not help, it's already configured to yarn package manager from the very start.
It might be related to the structure of capsule packages, it's not flat.

[zkochan]

This looks like a node_modules folder created by pnpm though:

The issue that you referenced is related to symlinks. pnpm uses symlinks to reference dependencies of packages. With Yarn I assume no symlinks will be created in the capsule.

[GiladShoham]

@zkochan I believe these are the symlinks created by bit link (between capsules of components from the workspace)

[GiladShoham]

I'm wondering if the case of @uttam23 yarn will solve the issue.
because in his case the types are from an external package and not from a component.

[GiladShoham]

@ivansky If you can help us create a small repo with mock code that reproduces your issue, it will be very helpful for us.

[ivansky]

Hi @GiladShoham I've finally prepared a reproducible repo
https://github.com/ivansky/bitdev-inferring-typescript-issue
And everything was working until I added libs/aa package and import type from there to libs/a.
So probably because of import type {} it removes libs/aa from dependencies of libs/a but the result declarations should have a relation.

[GiladShoham]

Thanks, we will look into it soon.

[uttam23]

"packageManager": "teambit.dependencies/yarn",

This worked out nicely . Able to build the component .Thanks

[GiladShoham]

Thanks for the update @uttam23 , appreciate it.
That indeed confirms my suspicions around it, which is related to the issue @ivansky referenced.
We will continue looking into it, see how what we can do about it, but it might not be an easy one.

[ivansky]

They look like different issues, first was just pnpm issue and the second one is about types are missing for some reason even with yarn.

[davidfirst]

I don't have a solution for this. I'm able to reproduce it with the repo provided by @ivansky .
I'm unsure though that it's Bit's issues. Seems like it's happening in other monorepos. see here:
microsoft/TypeScript#42873
(btw, I tried adding "baseUrl": "." to the tsconfig.json as suggested in one of the comments, but it didn't help).

I don't think it's related to import type. It happens also when I remove the type. You can see the issue easily in vscode when you open the capsules root dir. (run bit capsule list to get the dir).