h Posts - Answer Overflow

Explore posts from servers

•Created by h on 9/27/2023 in #questions

Struggling with PNPM Workspaces - How to Link Local Packages

👋 Hello Devs, I'm currently working on a TypeScript package called zod-to-fields that I wish to test with multiple frontend frameworks (React, Vue, Svelte). I'm using PNPM and have set up a workspace, but I'm having trouble figuring out how to make it all work smoothly. 📂 Folder Structure My directory tree is set up as follows:

.
├── examples
│   ├── react
│   ├── svelte
│   └── vue
├── src
│   └── index.ts
├── package.json
└── pnpm-workspace.yaml

.
├── examples
│   ├── react
│   ├── svelte
│   └── vue
├── src
│   └── index.ts
├── package.json
└── pnpm-workspace.yaml

My pnpm-workspace.yaml looks like this:

packages:
  - './examples/*'

packages:
  - './examples/*'

And in each package.json inside my examples folder, I have:

{
  "dependencies": {
    "zod-to-fields": "workspace:*"
  }
}

{
  "dependencies": {
    "zod-to-fields": "workspace:*"
  }
}

🤔 The Problem When I set up the dependency like above, my IDE doesn't seem to recognize the package's exported functions. The local linking doesn't seem to be working as expected. I've tried using file:../../src, but that comes with its own set of problems. 🙏 What I Need 1. How can I make sure that the local package is being linked correctly? 2. Is there any extra configuration I need to add to make TypeScript understand what I'm doing? Would really appreciate some pointers or examples from those who have successfully set up something similar. Thanks in advance! 🙌

1 replies

Gaming

Programming