DenoDDeno
Powered by
AntonOfTheWoodsA
Deno•16mo ago•
1 reply
AntonOfTheWoods

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

I am trying to work out how to start using
deno
deno
instead of
pnpm
pnpm
for a web
react/vite/ts
react/vite/ts
project I have. I cloned
tutorial-with-react
tutorial-with-react
to test. I am using
2.1.1
2.1.1
. I wanted to add a package from the
jsr
jsr
(
@std/collections
@std/collections
) and use that in the
tsx
tsx
pages. Naively, I just did a
deno add jsr:@std/collections
deno add jsr:@std/collections
and then tried to reference it with
import { pick } from "@std/collections";
import { pick } from "@std/collections";
. Somehow this isn't showing an error in
vscode
vscode
but if I run with
deno task dev
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
jsr
in front doesn't help either
import { pick } from "jsr:@std/collections";
import { pick } from "jsr:@std/collections";
, and nor does
import { pick } from "https://deno.land/std@0.224.0/collections/mod.ts";
import { pick } from "https://deno.land/std@0.224.0/collections/mod.ts";
, which doesn't get interpreted by
vite
vite
, and returns a
TS
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
package.json
? If so, does that mean I need to manually edit that ?
Deno banner
DenoJoin
Chat about Deno, a modern runtime for JavaScript and TypeScript.
20,934Members
Resources
Recent Announcements

Similar Threads

Was this page helpful?

Similar Threads

Error With Deno Command Installing JSR Packages
CharCChar / help
16mo ago
Deno + Hono + React. Any example or tutorial?
cococoreCcococore / help
2y ago
vite + react
dobbyshmurdahDdobbyshmurdah / help
2y ago
Deno + Vite + Local Packages Issue
JuanJJuan / help
2y ago