Adding JSR packages to vite example `tutorial-with-react`

I am trying to work out how to start using deno instead of pnpm for a web react/vite/ts project I have. I cloned tutorial-with-react to test. I am using 2.1.1. I wanted to add a package from the jsr (@std/collections) and use that in the tsx pages. Naively, I just did a deno add jsr:@std/collections and then tried to reference it with import { pick } from "@std/collections";. Somehow this isn't showing an error in vscode but if I run with deno task dev then I get the following error:
6:43:40 PM [vite] Internal server error: Failed to resolve import "@std/collections" from "src/pages/Dinosaur.tsx". Does the file exist?
Plugin: vite:import-analysis
File: /home/anton/dev/tmp/tutorial-with-react/src/pages/Dinosaur.tsx:4:21
18 | import { useEffect, useState } from "react";
19 | import { Link, useParams } from "react-router-dom";
20 | import { pick } from "jsr:@std/collections";
| ^
21 | export default function Dinosaur() {
22 | _s();
6:43:40 PM [vite] Internal server error: Failed to resolve import "@std/collections" from "src/pages/Dinosaur.tsx". Does the file exist?
Plugin: vite:import-analysis
File: /home/anton/dev/tmp/tutorial-with-react/src/pages/Dinosaur.tsx:4:21
18 | import { useEffect, useState } from "react";
19 | import { Link, useParams } from "react-router-dom";
20 | import { pick } from "jsr:@std/collections";
| ^
21 | export default function Dinosaur() {
22 | _s();
Adding a jsr in front doesn't help either import { pick } from "jsr:@std/collections";, and nor does import { pick } from "https://deno.land/std@0.224.0/collections/mod.ts";, which doesn't get interpreted by vite, and returns a TS file, which I guess isn't working either. Any pointers on how to do this? Do I need to force it to use the package.json ? If so, does that mean I need to manually edit that ?
1 Reply
AntonOfTheWoods
AntonOfTheWoodsOP3w ago
Ok, so looks like I managed to get it working with https://github.com/denoland/deno-vite-plugin. It was a bit fiddly and boy is it unbearably slow to start the dev server... but it works!