AntonOfTheWoods•3w ago

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

AntonOfTheWoodsOP•3w 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!