DEV Community

Cover image for How To Bundle Code For Deno Web Applications

How To Bundle Code For Deno Web Applications

Craig Morten on July 03, 2020

My a previous post on writing a React SSR app in Deno I covered how you could write a server-side rendered React app making use of JSPM and by serv...
Collapse
 
svdoever profile image
Serge van den Oever • Edited

@craigmorton, this looks really promising! I cloned the opine repo and executed:

deno run --allow-net --allow-read --unstable ./examples/react/server.tsx`

But I'm getting the error:

error: Import 'deno.land/x/types/react/v16.13.1/r...' failed: 404 Not Found
Imported from "file:///C:/p/opine/examples/react/components/App.tsx:2"

I'm new to Deno, and have googled, searched on deno.land, but have no clue how to solve this... Any help would be appreciated!

I'm running on version 1.3 of Deno...

Collapse
 
craigmorten profile image
Craig Morten

Hey Serge 👋

Sorry it's not working for you! I'll take a look now and see if can reproduce or suggest a fix 😄

Collapse
 
craigmorten profile image
Craig Morten

Ah it seems React types were removed from the deno.land/x registry and I didn't notice -_- (see discord.com/channels/6848986651432...), I'll have a look at pushing a fix using denopkg.com/Soremwar/deno_types/re... instead 😄

Thread Thread
 
svdoever profile image
Serge van den Oever

Hi Craig, thank for looking into the issue. Would be great if it could be fixed. I wrote a solution for server-side rect rendering with async calls for data a few years a go based on Hypernova that is used in production on anwbcamping.nl and available in github.com/macaw-interactive/react... (latest version available in the features/serveroute branch). This morning we were discussing the possibility to create a version based on react-suspence, running in an Azure function based on Deno, and then I found your work! So looking forward to investigate possibilities and try to adapt it to our use-case!

Thread Thread
 
craigmorten profile image
Craig Morten • Edited

Heya, so think I've got something working again and have updated the article and the Opine React SSR example.

The Deno types directive didn't seem to play nicely with the denopkg.com proxy so in the end directly referencing the types via the GitHub raw URL did the trick.

Give pulling the latest down and let me know how get on! 😄

Thread Thread
 
svdoever profile image
Serge van den Oever

Application starts up, but on localhost:3000 I get the following error:

TypeError: Cannot read property 'req' of undefined
at redirect (serveStatic.ts:220:39)
at serveStatic (serveStatic.ts:124:14)
at async Layer.handle as handle_request

Thread Thread
 
craigmorten profile image
Craig Morten

Oh dear, sounds similar to github.com/asos-craigmorten/opine/... which has cropped up for someone else today :/ haven’t been able to reproduce just yet so not sure what is causing it!

Thread Thread
 
svdoever profile image
Serge van den Oever

That looks very similar;-)

Thread Thread
 
craigmorten profile image
Craig Morten

Hey Serge, can you try with the --reload flag to see if it's a cached issue that has been resolved? Opine 0.21.0 has just been released for Deno 1.3.0 so might be good to check with that as well 😄

Thread Thread
 
svdoever profile image
Serge van den Oever

I run from the cloned version of the Opine...is that version 0.21.0? The --reload flag didn't work. Can you reproduce the issue? Or does it work on your side? What version of Deno are you running? 1.3.0 as well?

Thread Thread
 
craigmorten profile image
Craig Morten

Unfortunately I’m still unable to reproduce - I am on Deno 1.3.0, see in github.com/asos-craigmorten/opine/...

Can you confirm whether you are using windows? Wondering if is an OS based issue

Thread Thread
 
svdoever profile image
Serge van den Oever

Yes I'm running on Windows 64 bit version 1909... I will ask a colleague tomorrow to try it out as well...

Thread Thread
 
craigmorten profile image
Craig Morten

Cool, will get a VM booted up and see if it’s a windows issue 😊

Thread Thread
 
craigmorten profile image
Craig Morten

We've managed to confirm that this is definitely an issue with Opine that arises for Windows only users 🤦

I think I might have solved it in opine@0.21.2 (see github.com/asos-craigmorten/opine/...) but it would be super awesome if you (or anyone!) can confirm whether it is working as expected? 😄

Collapse
 
michaelcurrin profile image
Michael Currin • Edited

Some corrections

-make use community 
+make use of community
-:tada 
+:tada:
Enter fullscreen mode Exit fullscreen mode

And use sh for shell formatting markdown.

```sh
deno run ...
```
Enter fullscreen mode Exit fullscreen mode
Collapse
 
michaelcurrin profile image
Michael Currin • Edited

Thanks. I was looking for React client code. Unfortunately with and without hydrate I still get errors that # private symbol and Deno is not valid, when I load my bundle in the browser.

Collapse
 
michaelcurrin profile image
Michael Currin

It works for me to use .hydrate or .render

I fixed my errors by the way. Importing from CDNs alone was fine. Importing from Deno modules caused my bundle to include things not compatible in the browser.

Collapse
 
michaelcurrin profile image
Michael Currin

I have some guides for using bundle and compile on the CLI

michaelcurrin.github.io/dev-cheats...