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

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸•2w ago

Am I being dumb?

marvinh.•2w ago

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

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸•2w ago

So how would I fix this? @marvinh.

marvinh.•2w 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

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸•2w 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.•2w 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

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸•2w 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.•2w 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

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸•2w 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.•2w 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

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸•2w ago

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

marvinh.•2w 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

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸•2w 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.•2w ago

happy to help 🎉

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸•2w 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.•2w ago

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

coty•2w ago

Everyone wants deno bundle back 😂

🎀𝔸ℕ𝔾𝔼𝕃 𝔻𝕆𝕃𝕃𝔽𝔸ℂ𝔼🎀🇵🇸•2w ago

Could def. be very useful. 🤔