Failed to import - primereact (alias cannot contain slashes)

[kyjus25]

Attempting to use PrimeReact in a Fresh Deno project which uses preact/compat

Failing module

• GitHub: https://github.com/primefaces/primereact
• npm: https://npmjs.com/package/primereact

"imports": {
  ...
  "primereact/": "https://esm.sh/primereact@10.3.3&alias=react:preact/compat,react-dom:preact/compat&external=preact/"
}

import { Button } from "primereact/button"

Error message

After onload I got this:

Module not found

Import path works if I change preact/compat to not have a slash, but this is of course not the proper alias

https://preactjs.com/guide/v10/getting-started#aliasing-react-to-preact

Additional info

• Browser version: Brave v1.61.104 (Chromium)

Full disclosure I also may be doing this completely wrong.

[ije]

supposed to work, seems it's a bug of the recent update, i will look into it

[kyjus25]

@ije Thank you for quick reply 🙏 Appreciate any assistance

[hapaxlife]

This works for me.

I start from a new project (deno run -A -r https://fresh.deno.dev) and I modify those 2 files

deno.json

  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.7.1/",
    "$std/": "https://deno.land/std@0.224.0/",
    "preact": "https://esm.sh/preact@10.20.1",
    "preact/": "https://esm.sh/preact@10.20.1/",
    "react": "https://esm.sh/preact@10.20.1/compat",
    "react-dom": "https://esm.sh/preact@10.20.1/compat",
    "client-only": "https://esm.sh/preact@10.20.1/compat",
    "@types/react": "https://esm.sh/preact@10.20.1/compat",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.6.0",

    "primereact": "https://esm.sh/primereact?external=react,react-dom&target=es2022",
    "primereact/button": "https://esm.sh/primereact/button?external=react,react-dom&target=es2022",
   "primereact/rating": "https://esm.sh/primereact/rating?external=react,react-dom&target=es2022"
  },

Counter.tsx

import type { Signal } from "@preact/signals";
import { Button } from 'primereact/button';
import { Rating } from 'primereact/rating';

interface CounterProps {
  count: Signal<number>;
}

export default function Counter(props: CounterProps) {
  return (
    <div class="flex gap-8 py-6">
      <Button onClick={() => props.count.value -= 1}>-1</Button>
      <p class="text-3xl tabular-nums">{props.count}</p>
      <Button onClick={() => props.count.value += 1}>+1</Button>
      <Rating value={4}></Rating>
    </div>
  );
}