Even if you add a module in the same workspace as a dependency, I cannot import it

[ever0de]

I'm creating a repository like this:
https://github.com/ever0de/http-message-sharing-monorepo

File structure

├── api
├── http-message
├── package.json
├── pnpm-workspace.yaml

api and http-message are specified in their respective workspaces.

But even though api has http-message have a dependency, I get an error saying it cannot be imported.

Error Message

Cannot find module '@ever0de/http-message' or its corresponding type declarations.

https://github.com/ever0de/http-message-sharing-monorepo/runs/6588610958?check_suite_focus=true

am i missing something?

[raygesualdo]

That's a TypeScript error saying it can't find the source. It's probably unrelated to pnpm. I see that the package.json for the @ever0de/http-message package is missing a main field. Add that pointing to src/index.ts and TypeScript should be able to import that code + types correctly.

[ackvf]

What if I don't have a single entry point, but instead it's a UI and utils library with lots of files?

[starkfire]

@ackvf you might be looking for "exports"?

In package.json, you can add an "exports" field to define multiple entry points that point to barrel files:

{
  "name": "shadcn-ui",
  "exports": {
    "./components": "./dist/components.js",
    "./utils": "./dist/utils.js"
  }
}

// importing the component from a separate app/package
// this one points to dist/components.js
import { Button } from "shadcn-ui/components"

If you don't like working on barrel files (e.g. performance concerns?) and you would like to import individual UI components, you can define entry points where a subpath to the package would point to all JS files within a specific directory:

{
  "name": "shadcn-ui",
  "exports": {
    "./*": "./dist/ui/*.js",
  }
}

// importing the component from a separate app/package
// this one points to dist/ui/button.js
import { Button } from "shadcn-ui/button"

Or in certain cases, you may want to use conditional exports (e.g. in case you are building and exporting source files in CJS and ESM formats):

{
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    }
  }
}

If the IDE/editor can't resolve imports from these packages for some reason, you may need to tweak tsconfig.json.