HTTPS imports in browser breaking stuff.

I'm trying to build this tiny React app (just a foundation for the bigger project) and the bundle builds with esbuild, however I'm getting the errors from the screenshot. Here's the link to the repo: https://github.com/angeldollface/shonk.ts

GitHub

GitHub - angeldollface/shonk.ts: A Sharkey frontend written with Re...

A Sharkey frontend written with React and Deno. :sauropod: :shark: :eye: - GitHub - angeldollface/shonk.ts: A Sharkey frontend written with React and Deno. :shark: :eye:

18 Replies

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸OP•5mo ago

Am I being dumb?

marvinh.•5mo ago

Browsers do not support executing TypeScript. They can only run plain JavaScript

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸OP•5mo ago

So how would I fix this? @marvinh.

marvinh.•5mo ago

transpile/bundle your code to plain JavaScript first and serve that to browsers. You could use esbuild with this plugin https://jsr.io/@luca/esbuild-deno-loader for that

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸OP•5mo ago

I am well aware of this by the way. Let me try. I tried this plugin yesterday but let me try again. Thank you for trying to help.💕 @marvinh. So the can't load xy.ts from remote errors disappeared. As they should. However, now the browser console complains that it cannot find the name "Deno". Obviously. I had a look and the compiled JS seems to be making calls to Deno.env. How could I fix this?

marvinh.•5mo ago

A couple of ways you could fix this: 1. Provide your own Deno shim 2. Don't include files in your browser bundles that references Deno-only code (requires rearchitecting your code) 3. If it's just Deno.env calls you could potentially replace that with esbuild's define API. They have some examples for process.env.NODE_ENV in their docs for that

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸OP•5mo ago

Add 1.): How would I do that? (just a small example). Hmm...as far as I can tell everything in deps.ts is runtime-agnostic. With the exception of the plugin.

marvinh.•5mo ago

You'd have a script something like this before loading your generated browser bundles:

globalThis.Deno = {
  env(str) {
    // do something
  }
}

globalThis.Deno = {
  env(str) {
    // do something
  }
}

basically a polyfill for deno apis

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸OP•5mo ago

Ah! Actually I just had a brainwave What if I load the plugin directly in the build script. Let me try that real quick

marvinh.•5mo ago

In that case maybe you could put server-related deps into another file so that it doesn't get pulled in by any entry you pass to esbuild

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸OP•5mo ago

if that fails, I'll fall back to what you suggested.

marvinh.•5mo ago

yeah that could work. In either way when working both with server + client one always have to be mindful of what gets imported where

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸OP•5mo ago

No luck. Hmmmmm, this is frustrating. Actually I fixed it now. Turns out I forgot to remove the file_server module from the deps file. Lesson learned: DO NOT INCLUDE DENO-SPECIFIC DEPS IN YOUR DEPS FILE. Problem solved. Let me push My hero @marvinh. This was driving me actually insane. And I wouldn't have realized until you said what you said. ❤️ ❤️

marvinh.•5mo ago

happy to help 🎉

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸OP•5mo ago

let me push so you can have a look. Can we document this somewhere so someone else doesn't have to struggle like I did? Done. Because it is easy to mess up.

marvinh.•5mo ago

There are currently some discussions internally whether we should bring back deno bundle which does this for you

coty•5mo ago

Everyone wants deno bundle back 😂

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸OP•5mo ago

Could def. be very useful. 🤔