Franky P•9mo ago

Can't use npm package: Uncaught (in promise) TypeError: Could not resolve 'preact/hooks'

I get this error when trying to import the Preact version of Auto-animate in Fresh https://auto-animate.formkit.com/#usage-preact

AutoAnimate - Add motion to your apps with a single line of code

A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Solid, Vue, Svelte, or any other JavaScript application.

2 Replies

Deno AI Helper•9mo ago

According to the documentation, Deno generally works off explicit specifiers, which means it will not try any other specifier at runtime than the one that is emitted. This means to successfully load the JSX runtime, "react/jsx-runtime" would need to resolve to a module. Deno supports remote modules, and most CDNs resolve the specifier easily. For example, if you wanted to use Preact from the esm.sh CDN, you would use https://esm.sh/preact as the JSX import source, and esm.sh will resolve https://esm.sh/preact/jsx-runtime as a module, including providing a header in the response that tells Deno where to find the type definitions for Preact. You can add the JSX import source pragma to a .jsx or .tsx module, and Deno will respect it. The @jsxImportSource pragma needs to be in the leading comments of the module. For example to use Preact from esm.sh, you would do something like this:

/** @jsxImportSource https://esm.sh/preact */

export function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

/** @jsxImportSource https://esm.sh/preact */

export function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

If you want to configure a JSX import source for a whole project, so you don’t need to insert the pragma on each module, you can use the "compilerOptions" in a configuration file to specify this. For example if you were using Preact as your JSX library from esm.sh, you would configure the following, in the configuration file:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "https://esm.sh/preact"
  }
}

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "https://esm.sh/preact"
  }
}

If you're still having issues, it might be helpful to provide a code snippet or more context about the error. 🦕

Helpful Links: Deno 1.29: Custom npm registry support Configuring JSX | Manual | Deno Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands, limited npm support, and more npm: specifiers | Manual | Deno

Franky P•9mo ago

this doesn't work