Thank you Craig for making some time to update this article.
I didn't mean to offend you by saying the article is "useless", it just does not provide much value for begginers and new to Deno developers.
I have my own blog (lytrax.io) that I have many outdated articles and also many outdated answers in Stack Overflow and every single article has value; it's value just declines in time because it gets outdated and sometimes not even working with new versions.
Now for the updated version, I still get React hooks error in server.tsx line 29 where (ReactDOMServer as any).renderToString tries to render the <App/> component:
error: Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
...
at server.tsx:29:29
I tried to run this using Windows 10 and also macOS Catalina and getting the exact same error on both systems. I have created a Github repo here github.com/clytras/deno-react-ssr to make it easy test the code on different environments.
What am I doing wrong?
Again thanks for replying and updating the article! 👍
Curious...! I'll check out your repo and see what I've missed 😄 Had it working locally when did the rewrite so maybe something lost in translation somewhere! 😅
Update:
So I ran the following:
$mkdir clytras
$cd clytras
$git clone git@github.com:clytras/deno-react-ssr.git
Cloning into 'deno-react-ssr'...
coremote: Enumerating objects: 9, done.
remote: Counting objects: 100% (9/9), done.
remote: Compressing objects: 100% (9/9), done.
remote: Total 9 (delta 1), reused 8 (delta 0), pack-reused 0
Receiving objects: 100% (9/9), done.
Resolving deltas: 100% (1/1), done.
$cd ./deno-react-ssr
$deno upgrade
Looking up latest version
Local deno version 1.5.4 is the most recent release
$deno --version
deno 1.5.4 (bc79d55, release, x86_64-apple-darwin)
v8 8.8.278.2
typescript 4.0.5
$deno run --allow-net--allow-read--unstable ./server.tsx
Check ~/git/clytras/deno-react-ssr/server.tsx
React SSR App listening on port 3000
Opened up http://localhost:3000 on both Firefox and Chrome (for MacOS) and could see the app running as intended without any console errors!
Firefox:
Chrome:
When you have run your updated application, have you checked to see if the old version of the application has been stopped! I commonly use port 3000 for apps and find all the time that I'm wondering why one app isn't right when I have a forked version running in a different window! (E.g. lsof -ti tcp:3000)
Otherwise, rather unhelpfully / frustratingly(!) your setup works on my machine! (MacOS Mojave 10.14.6)
If you don't make any progress debugging, can you try out the React example on the Opine repo (REF: github.com/asos-craigmorten/opine/...) - if that doesn't work we can get an issue raised and start debugging properly!
Very strange!
It's not the port, I just tried a different free port (17123) and getting the same error and I don't get anything when I run lsof -ti tcp:3000 on macOS Catalina (10.15.7).
Here is the screenshot of the console and the error:
And Windows terminal screenshot:
How can I debug this?
I also cloned opine and tried to run the example using deno run --allow-net --allow-read --unstable ./examples/react/server.tsx and I got an other error about invalid imports that are using the v infront of versions:
Warning std versions prefixed with 'v' were deprecated recently. Please change your import to https://deno.land/std@0.61.0/encoding/utf8.ts (at https://deno.land/std@v0.61.0/encoding/utf8.ts)
error: Import 'https://deno.land/std@v0.61.0/encoding/utf8.ts' failed: 404 Not Found
at https://deno.land/x/dejs@0.8.0/vendor/https/deno.land/std/encoding/utf8.ts:1:0
And this again for both Windows and macOS!
Does opine server running on your machine with Deno 1.5.4 without any modifications?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thank you Craig for making some time to update this article.
I didn't mean to offend you by saying the article is "useless", it just does not provide much value for begginers and new to Deno developers.
I have my own blog (lytrax.io) that I have many outdated articles and also many outdated answers in Stack Overflow and every single article has value; it's value just declines in time because it gets outdated and sometimes not even working with new versions.
Now for the updated version, I still get React hooks error in
server.tsxline 29 where(ReactDOMServer as any).renderToStringtries to render the<App/>component:I tried to run this using Windows 10 and also macOS Catalina and getting the exact same error on both systems. I have created a Github repo here github.com/clytras/deno-react-ssr to make it easy test the code on different environments.
What am I doing wrong?
Again thanks for replying and updating the article! 👍
Curious...! I'll check out your repo and see what I've missed 😄 Had it working locally when did the rewrite so maybe something lost in translation somewhere! 😅
Update:
So I ran the following:
Opened up
http://localhost:3000on both Firefox and Chrome (for MacOS) and could see the app running as intended without any console errors!Firefox:
Chrome:
When you have run your updated application, have you checked to see if the old version of the application has been stopped! I commonly use port 3000 for apps and find all the time that I'm wondering why one app isn't right when I have a forked version running in a different window! (E.g.
lsof -ti tcp:3000)Otherwise, rather unhelpfully / frustratingly(!) your setup works on my machine! (MacOS Mojave 10.14.6)
If you don't make any progress debugging, can you try out the React example on the Opine repo (REF: github.com/asos-craigmorten/opine/...) - if that doesn't work we can get an issue raised and start debugging properly!
Very strange!
It's not the port, I just tried a different free port (
17123) and getting the same error and I don't get anything when I runlsof -ti tcp:3000on macOS Catalina (10.15.7).Here is the screenshot of the console and the error:
And Windows terminal screenshot:
How can I debug this?
I also cloned opine and tried to run the example using
deno run --allow-net --allow-read --unstable ./examples/react/server.tsxand I got an other error about invalid imports that are using thevinfront of versions:And this again for both Windows and macOS!
Does opine server running on your machine with Deno 1.5.4 without any modifications?