Comments (9)
marvinhagemeister
commented on May 21, 2024
That sounds more like a sandpack issue. My guess is that it doesn't know about deno.json and never reads that file.
from preact.
adamzerner
commented on May 21, 2024
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?
from preact.
rschristian
commented on May 21, 2024
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)
from preact.
adamzerner
commented on May 21, 2024
@rschristian Gotcha, thanks for clarifying.
from preact.
adamzerner
commented on May 21, 2024
@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.
from preact.
rschristian
commented on May 21, 2024
npm:@preact/compat worked then? Glad to hear
from preact.
adamzerner
commented on May 21, 2024
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.
from preact.
marvinhagemeister
commented on May 21, 2024
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.
from preact.
adamzerner
commented on May 21, 2024
@marvinhagemeister Is there a way to alias react to preact in a way other than using npm: specifiers?
from preact.
Related Issues (20)
- "Cannot read properties of null (reading '__H')" when hydrating a component in the browser HOT 1
- οΌquestionοΌIs there any practical example of purely using CDN? HOT 5
- TypeError: undefined is not an object (evaluating 'this.l[e.type+!1]') HOT 1
- preact+react-modal,Uncaught TypeError: Cannot read properties of null (reading '__H') HOT 9
- Island architecture with partial hydration HOT 3
- preact renders only one iframe if more than one iframe provided to dangerouslySetInnerHTML HOT 2
- When the value of setState remains unchanged, the state-driven controlled component, such as <input/>, seems to no longer be under the influence of the state. HOT 1
- There is no `context` in `preact/compat/PureComponent` and it breaks other libraries like `react-recurly`
- Running the text.test.js test, the results obtained are very poor and differ many times from the expected values in the code. HOT 3
- Components keep being added when updating state HOT 1
- Add JSX TS aria roles for dpub-aria-1.0
- `TypeError: Cannot set properties of null (setting '__m')` with preact 10.19.4 when destroying a component that calls `useId`
- Problem with rendering child component on props changes HOT 3
- "Components keep being added when updating state" issue persists when using tags other than div HOT 1
- preact/compat's SetStateAction is different from React's SetStateAction HOT 4
- useSelector hook stops being called under certain conditions since preact 10.19.4 HOT 3
- Implement onscrollend event attribute for TypeScript JSX
- TypeScript JSX focus events don't have consistent case HOT 5
- Typescript issues in 10.19.4+ with @mui/material HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preact.