Juan Posts - Deno

Juan

•Created by Juan on 10/19/2024 in #help

Deno + Vite + Local Packages Issue

Hello! I'm new to deno and I'm giving a try to deno 2. I have a Vite project that relies on local packages.

deno -v
deno 2.0.2

deno -v
deno 2.0.2

<root>
├── some-vite-project    <--- uses pkg-a and pkg-b
│   ├── deno.json
│   ├── index.html
│   ├── public
│   ├── src
│   └── vite.config.ts
├── deno.json
└── packages
    ├── pkg-a
    │   ├── mod.ts
    │   ├── deno.json
    └── pkg-b
        ├── mod.ts
        └── deno.json

<root>
├── some-vite-project    <--- uses pkg-a and pkg-b
│   ├── deno.json
│   ├── index.html
│   ├── public
│   ├── src
│   └── vite.config.ts
├── deno.json
└── packages
    ├── pkg-a
    │   ├── mod.ts
    │   ├── deno.json
    └── pkg-b
        ├── mod.ts
        └── deno.json

In node/bun, you would use workspace protocols in package.json (https://bun.sh/docs/install/workspaces):

{
  "name": "some-vite-project",
  "dependencies": {
    "@scope/pkg-a": "workspace:*",
    "@scope/pkg-b": "workspace:*"
  }
}

{
  "name": "some-vite-project",
  "dependencies": {
    "@scope/pkg-a": "workspace:*",
    "@scope/pkg-b": "workspace:*"
  }
}

Following Deno's documentation, I attempted to use relative imports in deno.json:

{
  "imports": {
    "@scope/pkg-a": "../pkg-a/mod.ts",
    "@scope/pkg-b": "../pkg-b/mod.ts",
    "vite": "npm:vite@^5.4.9"
  }
}

{
  "imports": {
    "@scope/pkg-a": "../pkg-a/mod.ts",
    "@scope/pkg-b": "../pkg-b/mod.ts",
    "vite": "npm:vite@^5.4.9"
  }
}

However, this results in the following error:

[plugin:vite:import-analysis] Failed to resolve import "@scope/pkg-a" from "src/main.ts". Does the file exist?
/home/user/Desktop/deno-project/src/main.ts:3:34
1  |  import "./style.css";
2  |  import { someMethod } from "@scope/pkg-a";
   |                                     ^
3  |  console.log(someMethod());

[plugin:vite:import-analysis] Failed to resolve import "@scope/pkg-a" from "src/main.ts". Does the file exist?
/home/user/Desktop/deno-project/src/main.ts:3:34
1  |  import "./style.css";
2  |  import { someMethod } from "@scope/pkg-a";
   |                                     ^
3  |  console.log(someMethod());

I've set the workspace field in the root deno.json file like this:

{
  "workspace": ["./some-vite-project", "./packages/pkg-a", "./package/pkg-b"],
}

{
  "workspace": ["./some-vite-project", "./packages/pkg-a", "./package/pkg-b"],
}

Thanks for any help!

4 replies