dan.the.discloser
dan.the.discloser•2y ago

What the prefered way to use REACT in deno

Is alephjs my best choice?
33 Replies
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
KyleJune
KyleJune•2y ago
I use esbuild to generate my bundles.
dan.the.discloser
dan.the.discloser•2y ago
??why esbuild rather than deno build?? preact looks like a react alternatives. still the same questions of what to use around it
KyleJune
KyleJune•2y ago
Deno build isn't as configurable. I believe they plan on deprecating it. The esbuild deno loader is used by the deno company and maintained by one of their employees. https://deno.land/x/esbuild_deno_loader@0.6.0
cdoremus
cdoremus•2y ago
Ultra is a good choice: https://ultrajs.dev
Ultra: The Quest for Zero-Legacy
Hypermodern Zero-Legacy Deno/React Framework
dan.the.discloser
dan.the.discloser•2y ago
not much documentation, but lots of example files 1) Running many examples I get
assertion failed [block != nullptr]: BasicBlock requested for unrecognized address
(BuilderBase.h:550 block_for_offset)
assertion failed [block != nullptr]: BasicBlock requested for unrecognized address
(BuilderBase.h:550 block_for_offset)
I don't know what it means or what to do about it. 2) client.tsx and server.tsx both point to the same App. Why is it in both places?
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
dan.the.discloser•2y ago
Thank you. 1) What does the stuff about "hydrateRoot" mean? 2) Where/how do find the documentation? 3) If App is my root, how does it get shoot? 4) Where do I put /** @jsx React.createElement */ -- I don't recognize the syntax
function App() {
return (
<button onClick={shoot}>Take the shot!</button>
);
}

const shoot = () => {
alert("Great Shot!");
}
function App() {
return (
<button onClick={shoot}>Take the shot!</button>
);
}

const shoot = () => {
alert("Great Shot!");
}
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
cdoremus
cdoremus•2y ago
Try running the dev command line with the --reload option. It is best to ask questions like this in the, Ultra discord: https://discord.gg/XDC5WxGHb2
dan.the.discloser
dan.the.discloser•2y ago
thank you 3) what do I do to get in included? Does something like "build" handle that?
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
dan.the.discloser•2y ago
Deno build is crashing on me running on example code from Ultra, Aleph, etc. How do I use esbuild_deno_loader instead?
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
KyleJune
KyleJune•2y ago
The Readme has an example script. Then you would just run that script with deno.
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
dan.the.discloser•2y ago
Thank you. My error I tried to set the entry point my client entry point rather than leaving it as
["https://deno.land/std@0.150.0/hash/sha1.ts"]
["https://deno.land/std@0.150.0/hash/sha1.ts"]
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
dan.the.discloser•2y ago
my error (my mistake) seemingly was thinking I had to edit entryPoints: in the sample file
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
dan.the.discloser•2y ago
when i editted to my actual client side entry point, it then couldn't resolve the imports import useAsset from "ultra/hooks/use-asset.js"; didn't work anymore in `app.ts1
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
dan.the.discloser•2y ago
No. I just copied the file from the readme, names it alt-build.ts in the root directory
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
dan.the.discloser•2y ago
I could add that, and set the URL to the vendor directory (??) I am not attached at all to ultra. I am having problems with deno build and try to work around them. Aleph gives me the same problem with deno build
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
dan.the.discloser•2y ago
deno build crashes for me. there is an open bug report about the problem (not made by me) that is about a month old so I am looking for some way to write react programs in deno that doesn't rely on deno build
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
dan.the.discloser•2y ago
you are right it is call build.ts which is using import { createBuilder } from "ultra/build.ts"; I get errors like this
assertion failed [block != nullptr]: BasicBlock requested for unrecognized address
(BuilderBase.h:550 block_for_offset)
assertion failed [block != nullptr]: BasicBlock requested for unrecognized address
(BuilderBase.h:550 block_for_offset)
sporadically during http fetch when I use deno run -A --no-check --watch ./server.tsx and a build time whenever I use deno run -A ./build.ts
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
dan.the.discloser•2y ago
For the build version deno task build
Warning deno task is unstable and may drastically change in the future
Task build deno run -A ./build.ts
[ultra] - INFO Building module graph for entrypoint ./client.tsx
assertion failed [block != nullptr]: BasicBlock requested for unrecognized address
(BuilderBase.h:550 block_for_offset)
Warning deno task is unstable and may drastically change in the future
Task build deno run -A ./build.ts
[ultra] - INFO Building module graph for entrypoint ./client.tsx
assertion failed [block != nullptr]: BasicBlock requested for unrecognized address
(BuilderBase.h:550 block_for_offset)
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
dan.the.discloser•2y ago
presumably so since it i a ".h" file Also occasionally (15% of the time) I client side errors from when I refresh my browser.
react_devtools_backend.js:4026 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js:84
error @ react-dom.development.js:68
errorHydratingContainer @ react-dom.development.js:7973
recoverFromConcurrentError @ react-dom.development.js:17793
performConcurrentWorkOnRoot @ react-dom.development.js:17744
workLoop @ scheduler.development.js:214
flushWork @ scheduler.development.js:193
performWorkUntilDeadline @ scheduler.development.js:401
setTimeout (async)
__setImmediate$ @ scheduler.development.js:2
schedulePerformWorkUntilDeadline @ scheduler.development.js:417
performWorkUntilDeadline @ scheduler.development.js:404
setTimeout (async)
__setImmediate$ @ scheduler.development.js:2
schedulePerformWorkUntilDeadline @ scheduler.development.js:417
requestHostCallback @ scheduler.development.js:435
unstable_scheduleCallback2 @ scheduler.development.js:347
scheduleCallback$1 @ react-dom.development.js:18884
ensureRootIsScheduled @ react-dom.development.js:17712
scheduleInitialHydrationOnRoot @ react-dom.development.js:17641
createHydrationContainer @ react-dom.development.js:19792
hydrateRoot2 @ react-dom.development.js:20261
hydrateRoot$1 @ react-dom.development.js:20553
exports.hydrateRoot @ client.development.js:53
(anonymous) @ hydrate.js:33
startTransition2 @ react.development.js:1580
react_devtools_backend.js:4026 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js:84
error @ react-dom.development.js:68
errorHydratingContainer @ react-dom.development.js:7973
recoverFromConcurrentError @ react-dom.development.js:17793
performConcurrentWorkOnRoot @ react-dom.development.js:17744
workLoop @ scheduler.development.js:214
flushWork @ scheduler.development.js:193
performWorkUntilDeadline @ scheduler.development.js:401
setTimeout (async)
__setImmediate$ @ scheduler.development.js:2
schedulePerformWorkUntilDeadline @ scheduler.development.js:417
performWorkUntilDeadline @ scheduler.development.js:404
setTimeout (async)
__setImmediate$ @ scheduler.development.js:2
schedulePerformWorkUntilDeadline @ scheduler.development.js:417
requestHostCallback @ scheduler.development.js:435
unstable_scheduleCallback2 @ scheduler.development.js:347
scheduleCallback$1 @ react-dom.development.js:18884
ensureRootIsScheduled @ react-dom.development.js:17712
scheduleInitialHydrationOnRoot @ react-dom.development.js:17641
createHydrationContainer @ react-dom.development.js:19792
hydrateRoot2 @ react-dom.development.js:20261
hydrateRoot$1 @ react-dom.development.js:20553
exports.hydrateRoot @ client.development.js:53
(anonymous) @ hydrate.js:33
startTransition2 @ react.development.js:1580
(anonymous) @ hydrate.js:32
requestIdleCallback (async)
hydrate @ hydrate.js:28
(anonymous) @ client.tsx? [sm]:3
react-dom.development.js:8692 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (react-dom.development.js:8692:17)
at popHydrationState (react-dom.development.js:8812:17)
at completeWork (react-dom.development.js:15376:36)
at completeUnitOfWork (react-dom.development.js:18282:24)
at performUnitOfWork (react-dom.development.js:18264:13)
at workLoopConcurrent (react-dom.development.js:18247:13)
at renderRootConcurrent (react-dom.development.js:18222:15)
at performConcurrentWorkOnRoot (react-dom.development.js:17738:46)
at workLoop (scheduler.development.js:214:42)
at flushWork (scheduler.development.js:193:22)
throwOnHydrationMismatch @ react-dom.development.js:8692
popHydrationState @ react-dom.development.js:8812
completeWork @ react-dom.development.js:15376
completeUnitOfWork @ react-dom.development.js:18282
performUnitOfWork @ react-dom.development.js:18264
workLoopConcurrent @ react-dom.development.js:18247
renderRootConcurrent @ react-dom.development.js:18222
performConcurrentWorkOnRoot @ react-dom.development.js:17738
workLoop @ scheduler.development.js:214
flushWork @ scheduler.development.js:193
performWorkUntilDeadline @ scheduler.development.js:401
setTimeout (async)
__setImmediate$ @ scheduler.development.js:2
schedulePerformWorkUntilDeadline @ scheduler.development.js:417
performWorkUntilDeadline @ scheduler.development.js:404
setTimeout (async)
__setImmediate$ @ scheduler.development.js:2
schedulePerformWorkUntilDeadline @ scheduler.development.js:417
requestHostCallback @ scheduler.development.js:435
unstable_scheduleCallback2 @ scheduler.development.js:347
scheduleCallback$1 @ react-dom.development.js:18884
(anonymous) @ hydrate.js:32
requestIdleCallback (async)
hydrate @ hydrate.js:28
(anonymous) @ client.tsx? [sm]:3
react-dom.development.js:8692 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
at throwOnHydrationMismatch (react-dom.development.js:8692:17)
at popHydrationState (react-dom.development.js:8812:17)
at completeWork (react-dom.development.js:15376:36)
at completeUnitOfWork (react-dom.development.js:18282:24)
at performUnitOfWork (react-dom.development.js:18264:13)
at workLoopConcurrent (react-dom.development.js:18247:13)
at renderRootConcurrent (react-dom.development.js:18222:15)
at performConcurrentWorkOnRoot (react-dom.development.js:17738:46)
at workLoop (scheduler.development.js:214:42)
at flushWork (scheduler.development.js:193:22)
throwOnHydrationMismatch @ react-dom.development.js:8692
popHydrationState @ react-dom.development.js:8812
completeWork @ react-dom.development.js:15376
completeUnitOfWork @ react-dom.development.js:18282
performUnitOfWork @ react-dom.development.js:18264
workLoopConcurrent @ react-dom.development.js:18247
renderRootConcurrent @ react-dom.development.js:18222
performConcurrentWorkOnRoot @ react-dom.development.js:17738
workLoop @ scheduler.development.js:214
flushWork @ scheduler.development.js:193
performWorkUntilDeadline @ scheduler.development.js:401
setTimeout (async)
__setImmediate$ @ scheduler.development.js:2
schedulePerformWorkUntilDeadline @ scheduler.development.js:417
performWorkUntilDeadline @ scheduler.development.js:404
setTimeout (async)
__setImmediate$ @ scheduler.development.js:2
schedulePerformWorkUntilDeadline @ scheduler.development.js:417
requestHostCallback @ scheduler.development.js:435
unstable_scheduleCallback2 @ scheduler.development.js:347
scheduleCallback$1 @ react-dom.development.js:18884
ensureRootIsScheduled @ react-dom.development.js:17712
scheduleInitialHydrationOnRoot @ react-dom.development.js:17641
createHydrationContainer @ react-dom.development.js:19792
hydrateRoot2 @ react-dom.development.js:20261
hydrateRoot$1 @ react-dom.development.js:20553
exports.hydrateRoot @ client.development.js:53
(anonymous) @ hydrate.js:33
startTransition2 @ react.development.js:1580
(anonymous) @ hydrate.js:32
requestIdleCallback (async)
hydrate @ hydrate.js:28
(anonymous) @ client.tsx? [sm]:3
react-dom.development.js:13891 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
at updateHostRoot (react-dom.development.js:13891:65)
at beginWork (react-dom.development.js:15029:22)
at beginWork$1 (react-dom.development.js:18811:22)
at performUnitOfWork (react-dom.development.js:18256:20)
at workLoopSync (react-dom.development.js:18195:13)
at renderRootSync (react-dom.development.js:18174:15)
at recoverFromConcurrentError (react-dom.development.js:17796:28)
at performConcurrentWorkOnRoot (react-dom.development.js:17744:30)
at workLoop (scheduler.development.js:214:42)
at flushWork (scheduler.development.js:193:22)
ensureRootIsScheduled @ react-dom.development.js:17712
scheduleInitialHydrationOnRoot @ react-dom.development.js:17641
createHydrationContainer @ react-dom.development.js:19792
hydrateRoot2 @ react-dom.development.js:20261
hydrateRoot$1 @ react-dom.development.js:20553
exports.hydrateRoot @ client.development.js:53
(anonymous) @ hydrate.js:33
startTransition2 @ react.development.js:1580
(anonymous) @ hydrate.js:32
requestIdleCallback (async)
hydrate @ hydrate.js:28
(anonymous) @ client.tsx? [sm]:3
react-dom.development.js:13891 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
at updateHostRoot (react-dom.development.js:13891:65)
at beginWork (react-dom.development.js:15029:22)
at beginWork$1 (react-dom.development.js:18811:22)
at performUnitOfWork (react-dom.development.js:18256:20)
at workLoopSync (react-dom.development.js:18195:13)
at renderRootSync (react-dom.development.js:18174:15)
at recoverFromConcurrentError (react-dom.development.js:17796:28)
at performConcurrentWorkOnRoot (react-dom.development.js:17744:30)
at workLoop (scheduler.development.js:214:42)
at flushWork (scheduler.development.js:193:22)
Thank you all for your help -- it is now solved the binary I get with CURL (native m1) is different from the one I got with BREW (x86 mode) and doesn't give the errors --- hopefully it won't give me new and more interesting ones 🙂