Discussion on: Writing a React SSR app in Deno

[Craig Morten]

Ok, I am able to reproduce! Here are the steps that I took:

a. Ran the Deno upgrade command to change to v1.0.2:

deno upgrade --version 1.0.2

b. Checked that I was definitely testing on Deno v1.0.2

deno --version

deno 1.0.2
v8 8.4.300
typescript 3.9.2

c. Cleared my Deno cache in case I had managed to get the module previously and cache it:

deno info

And then deleting everything inside the directories listed for Remote modules cache and TypeScript compiler cache.

d. Created an app.tsx and server.tsx as per this article.

e. Ran the following command:

deno run --allow-net ./server.tsx

And voila, errors:

Compile ~/server.tsx
error: TS2307 [ERROR]: Cannot find module 'https://dev.jspm.io/react@16.13.1' or its corresponding type declarations.
import React from "https://dev.jspm.io/react@16.13.1";
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    at ~/server.tsx:1:19

TS2307 [ERROR]: Cannot find module 'https://dev.jspm.io/react-dom@16.13.1/server' or its corresponding type declarations.
import ReactDOMServer from "https://dev.jspm.io/react-dom@16.13.1/server";
                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    at ~/server.tsx:2:28

Found 2 errors.

In this instance, adding the @deno-types directive (though a good thing to do to get the React types) does nothing to solve the issue because Deno has the current bug that it's typescript compiler ignores all .tsx and .jsx files (see github.com/denoland/deno/pull/5785) and they are exactly the extensions we've been using!

Unfortunately neither Deno nor Typescript have a particularly great solution to this problem 😞 but there are 2 workarounds that you can use for now until v1.0.3 is released (if can find more then please comment!):

a. Use // @ts-ignore comments above each top-level React import statement. For example

// @ts-ignore
import React from "https://dev.jspm.io/react@16.13.1";
// @ts-ignore
import ReactDOMServer from "https://dev.jspm.io/react-dom@16.13.1/server";

Though I prefer option 2 (which I will use to update this blog post):

b. Create a dep.ts (note the .ts extension will mean that Deno v1.0.2 will compile it despite the bug). We will then import all of our dependencies into this file, and re-export them for use in our app.tsx and server.tsx:

// dep.ts
export { default as React } from "https://dev.jspm.io/react@16.13.1";
export { default as ReactDOMServer } from "https://dev.jspm.io/react-dom@16.13.1/server";
export { opine } from "https://deno.land/x/opine@0.3.0/mod.ts";
export {
  Request,
  Response,
  NextFunction,
} from "https://deno.land/x/opine@0.3.0/src/types.ts";

// app.tsx
import { React } from "./dep.ts";

// Rest of the app code stays the same

// server.tsx
import {
  opine,
  React,
  ReactDOMServer,
  Request,
  Response,
  NextFunction,
} from "./dep.ts";

// Rest of the server code stays the same

You can then run deno run --allow-net --reload ./server.tsx and it should start the application 🥳 🎉

Let me know how you get on!

Edit: Blog post all updated! Thanks so much for providing the feedback - articles become so much more useful to everyone through comments and pointing out bugs! I've certainly learned things 😄