Aliasing React to Preact in Deno

[adamzerner]

There is a section on the Getting Started page called "Aliasing React to Preact". There is no example for how to do this in a Deno project. So 1) I'd like to ask how to do so in a Deno project, and 2) I'd like to propose that a Deno example be added to "Aliasing React to Preact".

Context: I am using Fresh, am trying to use Sandpack, and get the following error when I do. This error is because Sandpack uses React's useState and Fresh uses Preact. I think (but am unsure) that what I need to do to resolve this is alias React to preact/compat.

TypeError: Cannot read properties of null (reading 'useState')
    at Module.n.useState (https://esm.sh/stable/react@18.2.0/denonext/react.mjs:2:6891)
    at Object.Za (https://esm.sh/v135/@codesandbox/sandpack-react@2.8.0/denonext/sandpack-react.mjs:690:7478)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3237)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)

As a guess, I tried doing:

"react": "npm:preact/compat",
"react-dom": "npm:preact/compat",
"react/jsx-runtime": "npm:preact/jsx-runtime"

in imports in deno.json but it didn't work.

[marvinhagemeister]

That sounds more like a sandpack issue. My guess is that it doesn't know about deno.json and never reads that file.

[adamzerner]

Maybe. So you're saying that:

"react": "npm:preact/compat",
"react-dom": "npm:preact/compat",
"react/jsx-runtime": "npm:preact/jsx-runtime"

in deno.json is in fact the correct way to alias React to Preact in Deno?

[rschristian]

With the npm: prefix, I'd think you should be using the dedicated compat package, i.e., npm:@preact/compat

@preact/compat is just a mirror of preact/compat but as a dedicated package (for fulfilling this sort of purpose)

[adamzerner]

@rschristian Gotcha, thanks for clarifying.

[adamzerner]

@marvinhagemeister @rschristian I think we can close this out. This addressed my question. I'll go ahead and close it but if you want to re-open it, please feel free to of course.

[rschristian]

npm:@preact/compat worked then? Glad to hear

[adamzerner]

Actually, sorry, I think I moved to close this too soon. Neither:

{
  ...
  "imports": {
    ...
    "react": "npm:@preact/compat",
    "react-dom": "npm:@preact/compat",
    "react/jsx-runtime": "npm:@preact/jsx-runtime"
  },
}

nor

{
  ...
  "imports": {
    ...
    "react": "npm:preact/compat",
    "react-dom": "npm:preact/compat",
    "react/jsx-runtime": "npm:preact/jsx-runtime"
  },
}

in deno.json successfully resolve the issue I am having with Sandpack. When I closed this issue I had thought that the issue was with Sandpack, but now I don't believe that to be the case.

In this repo I was able to get Sandpack working with Preact + Vite. That makes me think that Sandpack does in fact work in a Preact app that successfully aliases React to Preact, and that the issue I am having in my Deno app is regarding the above approaches not successfully aliasing React to Preact.

To see if this issue is specific to Sandpack or my repo, I tried testing a different library that depends on React (React Bootstrap) in a new Fresh project (repo). I was able to reproduce the issue.

routes/index.tsx

import { Button } from "react-bootstrap";

export default () => {
  return (
    <div>
      Hello world <Button>Example</Button>
    </div>
  );
};

deno.json

{
  "lock": false,
  "tasks": {
    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
    "manifest": "deno task cli manifest $(pwd)",
    "start": "deno run -A --watch=static/,routes/ dev.ts",
    "build": "deno run -A dev.ts build",
    "preview": "deno run -A main.ts",
    "update": "deno run -A -r https://fresh.deno.dev/update ."
  },
  "lint": {
    "rules": {
      "tags": [
        "fresh",
        "recommended"
      ]
    }
  },
  "exclude": [
    "**/_fresh/*"
  ],
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
    "preact": "https://esm.sh/preact@10.19.2",
    "preact/": "https://esm.sh/preact@10.19.2/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
    "tailwindcss": "npm:tailwindcss@3.3.5",
    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
    "$std/": "https://deno.land/std@0.208.0/",
    "react": "npm:@preact/compat",
    "react-dom": "npm:@preact/compat",
    "react/jsx-runtime": "npm:@preact/jsx-runtime",
    "react-bootstrap": "npm:react-bootstrap"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "nodeModulesDir": true
}

And I get this error when I run deno task start:

code/issue-4247-demo [master●] » deno task start
Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 5 routes and 1 islands.

 🍋 Fresh ready
    Local: http://localhost:8000/
Watcher File change detected! Restarting!

 🍋 Fresh ready
    Local: http://localhost:8000/
Watcher File change detected! Restarting!

 🍋 Fresh ready
    Local: http://localhost:8000/
Watcher File change detected! Restarting!

 🍋 Fresh ready
    Local: http://localhost:8000/

An error occurred during route handling or page rendering.
Error: Invalid type passed to createElement(): [object Object]
    at a.__b (https://esm.sh/stable/preact@10.19.2/denonext/debug.js:23:9)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2611)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
An error occurred during route handling or page rendering.
Error: Invalid type passed to createElement(): [object Object]
    at a.__b (https://esm.sh/stable/preact@10.19.2/denonext/debug.js:23:9)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2611)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
Watcher File change detected! Restarting!

 🍋 Fresh ready
    Local: http://localhost:8000/

An error occurred during route handling or page rendering.
Error: Invalid type passed to createElement(): [object Object]
    at a.__b (https://esm.sh/stable/preact@10.19.2/denonext/debug.js:23:9)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2611)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/preact-render-to-string@6.3.1/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)

And this (without the @):

"react": "npm:preact/compat",
"react-dom": "npm:preact/compat",
"react/jsx-runtime": "npm:preact/jsx-runtime",

doesn't work either.

So then, it seems that the question of how to alias React to Preact in a Deno project is still an open one.

[marvinhagemeister]

This is more of a Deno issue rather than an issue with Preact. At the moment there is no support for deduplicating npm dependencies and aliasing react to preact with npm: specifiers.

FYI: There is no @preact/jsx-runtime package. It should be preact/jsx-runtime instead.

[adamzerner]

@marvinhagemeister Is there a way to alias react to preact in a way other than using npm: specifiers?

[adamgreg]

Hi, I don't know if you still have this problem @adamzerner, but here are a couple of similar ways of aliasing react to preact, for the benefit of anyone else who ends up here.

If you import any modules that depend on React from https://esm.sh , you can either put the aliases in each URL like this:

{
  ...
  "imports": {
    "@radix-ui/react-alert-dialog": "https://esm.sh/@radix-ui/react-alert-dialog@1.0.4?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&external=preact",
  },
}

OR alias React to Preact in separate import map entries like this:

{
  ...
  "imports": {
    "react": "https://esm.sh/preact@10.19.3/compat",
    "react-dom": "https://esm.sh/preact@10.19.3/compat",
    "@types/react": "https://esm.sh/preact@10.19.3/compat",

    "@radix-ui/react-alert-dialog": "https://esm.sh/@radix-ui/react-alert-dialog@1.0.4?external=react,react-dom,@types/react",
  },
}

Either should work, and neither is ideal: The first method involves really complicated URLs, while the second method requires you to repeat your version of Preact multiple times in the import map.

Note: For any packages that you are using in Islands, you may also need to add &target=es2022 or similar to the URL, otherwise esm.sh will give you modules targeting Deno, and then sometimes Deno-specific calls get through to the browser.