Aliasing React to Preact in Deno #4252

adamzerner · 2024-01-04T03:28:22Z

adamzerner
Jan 4, 2024

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/[email protected]/denonext/react.mjs:2:6891)
    at Object.Za (https://esm.sh/v135/@codesandbox/[email protected]/denonext/sandpack-react.mjs:690:7478)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3237)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/[email protected]/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 · 2024-01-04T09:49:01Z

marvinhagemeister
Jan 4, 2024
Maintainer

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

0 replies

adamzerner · 2024-01-04T19:59:52Z

adamzerner
Jan 4, 2024
Author

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?

0 replies

rschristian · 2024-01-05T01:44:41Z

rschristian
Jan 5, 2024
Collaborator

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)

0 replies

adamzerner · 2024-01-05T06:21:50Z

adamzerner
Jan 5, 2024
Author

@rschristian Gotcha, thanks for clarifying.

0 replies

adamzerner · 2024-01-06T03:20:24Z

adamzerner
Jan 6, 2024
Author

@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.

0 replies

rschristian · 2024-01-06T03:22:26Z

rschristian
Jan 6, 2024
Collaborator

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

0 replies

adamzerner · 2024-01-06T04:01:25Z

adamzerner
Jan 6, 2024
Author

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/[email protected]/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/",
    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
    "tailwindcss": "npm:[email protected]",
    "tailwindcss/": "npm:/[email protected]/",
    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
    "$std/": "https://deno.land/[email protected]/",
    "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/[email protected]/denonext/debug.js:23:9)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2611)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/[email protected]/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/[email protected]/denonext/debug.js:23:9)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2611)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/[email protected]/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/[email protected]/denonext/debug.js:23:9)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2611)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:5050)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:3802)
    at m (https://esm.sh/v135/[email protected]/X-ZS8q/denonext/preact-render-to-string.mjs:2:2543)
    at m (https://esm.sh/v135/[email protected]/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.

0 replies

marvinhagemeister · 2024-01-08T09:13:57Z

marvinhagemeister
Jan 8, 2024
Maintainer

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.

0 replies

adamzerner · 2024-01-08T17:28:16Z

adamzerner
Jan 8, 2024
Author

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

1 reply

adamgreg Jan 30, 2024

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/[email protected]?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/[email protected]/compat",
    "react-dom": "https://esm.sh/[email protected]/compat",
    "@types/react": "https://esm.sh/[email protected]/compat",

    "@radix-ui/react-alert-dialog": "https://esm.sh/@radix-ui/[email protected]?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.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Aliasing React to Preact in Deno #4252

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 9 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Aliasing React to Preact in Deno #4252

adamzerner Jan 4, 2024

Replies: 9 comments · 1 reply

marvinhagemeister Jan 4, 2024 Maintainer

adamzerner Jan 4, 2024 Author

rschristian Jan 5, 2024 Collaborator

adamzerner Jan 5, 2024 Author

adamzerner Jan 6, 2024 Author

rschristian Jan 6, 2024 Collaborator

adamzerner Jan 6, 2024 Author

marvinhagemeister Jan 8, 2024 Maintainer

adamzerner Jan 8, 2024 Author

adamgreg Jan 30, 2024

adamzerner
Jan 4, 2024

Replies: 9 comments 1 reply

marvinhagemeister
Jan 4, 2024
Maintainer

adamzerner
Jan 4, 2024
Author

rschristian
Jan 5, 2024
Collaborator

adamzerner
Jan 5, 2024
Author

adamzerner
Jan 6, 2024
Author

rschristian
Jan 6, 2024
Collaborator

adamzerner
Jan 6, 2024
Author

marvinhagemeister
Jan 8, 2024
Maintainer

adamzerner
Jan 8, 2024
Author