"Cannot find module" when using exported package from NPM

[Piotr Kulpinski]

Describe the bug

I'm new to Bit and I'm trying to create a basic design system for my apps. I've created a scope with some basic components that are related to each other.

I have a Badge component which is dependant on the Slottable component from the same scope. Everything works well when I'm running it from the workspace:

I then exported the components to the public scope and I'm trying to use them from an NPM registry in my app. Everything seems to be running, except the fact that TypeScript complains about missing module:

bit status doesn't show any valuable info:

❯ bit status   
⢀⠀ loading components (2/3) curiousleaf.design/ui/badge@0.0.
nothing to tag or export (use "bit add <file...>" to track files or directories as components)

This, of course, breaks any type checking of the component inside the app.

The package.json has the slottable component listed in dependencies:

{
  "name": "@curiousleaf/design.ui.badge",
  "version": "0.0.2",
  "homepage": "https://bit.cloud/curiousleaf/design/ui/badge",
  "main": "dist/index.js",
  "componentId": {
    "scope": "curiousleaf.design",
    "name": "ui/badge",
    "version": "0.0.2"
  },
  "dependencies": {
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "@curiousleaf/design.utils.slottable": "0.0.1"
  },
  "devDependencies": {
    "@tabler/icons-react": "^2.44.0",
    "@testing-library/react": "^13.4.0",
    "@types/jest": "^29.2.2",
    "@types/testing-library__jest-dom": "^5.9.5",
    "@curiousleaf/envs.react": "0.0.1"
  },
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0"
  },
  "license": "SEE LICENSE IN LICENSE"
}

Any idea what I could be doing wrong?

Specifications

• Bit version: 1.5.29
• Workspace type: (harmony/legacy) harmony
• Node version: 20.9.0
• pnpm version: 8.12.1
• Platform: MacOS

Might be related to #4018

[Itay Mendelawy]

i am unsure how your project's typescript complains on an internal library. Bit already creates d.ts for you.
can you add skipLibCheck to your tsconfig?

[Piotr Kulpinski]

I've already had this option enabled in tsconfig.json.
My main issue is that the type checking is not working when importing bit components:

propThatDoesNotExists should be marked as invalid here by Typescript.

[Itay Mendelawy]

so in your consuming project you don't see this issue?
in this case, i suppose you need to ensure your tsconfig/eslink is configured correctly