What the prefered way to use REACT in deno

Is alephjs my best choice?
33 Replies
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
KyleJune
KyleJune2y ago
I use esbuild to generate my bundles.
dan.the.discloser
??why esbuild rather than deno build?? preact looks like a react alternatives. still the same questions of what to use around it
KyleJune
KyleJune2y 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
cdoremus2y ago
Ultra is a good choice: https://ultrajs.dev
Ultra: The Quest for Zero-Legacy
Hypermodern Zero-Legacy Deno/React Framework
dan.the.discloser
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 User2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
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 User2y ago
Message Not Public
Sign In & Join Server To View
cdoremus
cdoremus2y 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
thank you 3) what do I do to get in included? Does something like "build" handle that?
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
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 User2y ago
Message Not Public
Sign In & Join Server To View
KyleJune
KyleJune2y ago
The Readme has an example script. Then you would just run that script with deno.
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
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 User2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
my error (my mistake) seemingly was thinking I had to edit entryPoints: in the sample file
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
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 User2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
No. I just copied the file from the readme, names it alt-build.ts in the root directory
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
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 User2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
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 User2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
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 User2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
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 User2y ago
Message Not Public
Sign In & Join Server To View
dan.the.discloser
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 🙂