Using JSR package in Vite running in Deno

[etienne-dldc]

Hi,

I'm really excited about JSR and I started migrating the few packages I maintain (mostly for myself given their popularity 😅) from Node + NPM to Deno + JSR:

It worked quite well so far but I ran into a issue: In some of my project I had a folder with a Vite project to showcase an example of the package.

I managed to get Vite running in Deno and using --node-modules-dir and I can import npm packages fine but not JSR packages.

I see 2 potential solution to this:

1. Vite plugin

Option 1 would be to have a Vite plugin for Deno that would implement the same module resolution.
There is already some existing but I did not found any that supports jsr.

On that note, are there any plan to expose the module resolver from Deno to make it easier to create such tool ?

The downside of this solution is that it would be a Vite only solution and won't work for other bundlers.

2. Expose JSR packages in node_modules

Another option would be to make Deno also expose JSR packages in node_modules when running --node-modules-dir, this way the classic Node module resolution would also work.

[etienne-dldc]

Side note: since I could not make it work with Vite I used esbuild and @luca/esbuild-deno-loader in the meantime, you can see it in this repo: dldc-packages/canvas.
But I would much prefer to be able to use Vite as it's a more common setup and requires less tinkering than Esbuild.

[andykais]

seconding this, because esbuild doesnt seem to support my use case. I am trying to use jsr packages in a svelte web app. Attempting to use this loader in tandem with the svelte plugin seems to not be possible

import * as esbuild from "npm:esbuild@0.20.2";
import sveltePlugin from "npm:esbuild-svelte";
// Import the WASM build on platforms where running subprocesses is not
// permitted, such as Deno Deploy, or when running without `--allow-run`.
// import * as esbuild from "https://deno.land/x/esbuild@0.20.2/wasm.js";

import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.10.3";

const result = await esbuild.build({
  plugins: [
    sveltePlugin({
        preprocess: denoPlugins({
        configPath: './deno.json'
      }),
    }),
  ],
  mainFields: ["svelte", "browser", "module", "main"],
  conditions: ["svelte", "browser"],
  entryPoints: ["./src/main.ts"],
  outfile: "./dist/server.esm.js",
  bundle: true,
  format: "esm",
    logLevel: "info",
});

console.log(result.outputFiles);

esbuild.stop();

Depending on which plugin I declare first, Ill get [ERROR] Expected a JavaScript or TypeScript module, but identified a Unknown module. Importing these types of modules is currently not supported. or [ERROR] Could not resolve for jsr packages. I believe the current recommended way to use jsr packages in svelte is by installing them into a node modules folder with npx jsr and use --byonm, but I have struggled to get this working too

[andykais]

just an update on this point:

I believe the current recommended way to use jsr packages in svelte is by installing them into a node modules folder with npx jsr and use --byonm, but I have struggled to get this working too

I was able to get vite + jsr working by just fully using npm to handle node_modules management. E.g.

deno run -A create-vite --template svelte-ts
npm install
npx jsr add @andykais/ts-rpc

it still feels bad that nodejs is necessary to develop vite on deno, but this at least will let me develop (besides dependency management) and build for production in deno

[m0rphed]

Also experienced that issue, while I was building a project with Deno, Vite, TailwindCSS, shadcn/ui - managed to get all these working with Deno, but it seems that JSR (which is the official place where Deno hosts its standard library now) is not usable with Vite at the moment, because Vite dependent on node_modules, and if package is not from npm - it wouldn't be visible to Vite running with Deno?

E.g. I could not to use @std/dotenv with Vite in the project

(off-topic: I also failed to use Deno.env.get with Vite, but perhaps it's my stupidity)

---

P. S. there are a few attempts to build vite plugin for deno, e.g. vite-deno-plugin - but it's limited to esm.sh

[thesmartwon]

There is an official rollup plugin to resolve Deno modules that works with Vite.

However, it's slow and doesn't scale well because exec is order of magnitudes slower than a JS function call.

If Deno exposes a JS API instead of exec(`deno info --json ${imp}`) then ditching node_modules would be closer to reality.

[andykais]

it seems that JSR (which is the official place where Deno hosts its standard library now) is not usable with Vite at the moment, because Vite dependent on node_modules, and if package is not from npm - it wouldn't be visible to Vite running with Deno?

fwiw @m0rphed, I solved this by using the npx jsr add <jsr_package>, which then land in package.json and node_modules. You can see those here in my repo https://github.com/andykais/forager/blob/main/web/package.json#L28-L34. This is an extra step I need to run when adding/updating packages, but I can just use deno task dev without any npm install step