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:
No description
18 Replies
marvinh.
marvinh.β€’6mo ago
Browsers do not support executing TypeScript. They can only run plain JavaScript
marvinh.
marvinh.β€’6mo 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
πŸŽ€π”Έβ„•π”Ύπ”Όπ•ƒ π”»π•†π•ƒπ•ƒπ”½π”Έβ„‚π”ΌπŸŽ€πŸ‡΅πŸ‡Έ
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.
marvinh.β€’6mo 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
πŸŽ€π”Έβ„•π”Ύπ”Όπ•ƒ π”»π•†π•ƒπ•ƒπ”½π”Έβ„‚π”ΌπŸŽ€πŸ‡΅πŸ‡Έ
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.
marvinh.β€’6mo 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
πŸŽ€π”Έβ„•π”Ύπ”Όπ•ƒ π”»π•†π•ƒπ•ƒπ”½π”Έβ„‚π”ΌπŸŽ€πŸ‡΅πŸ‡Έ
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.
marvinh.β€’6mo 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
marvinh.
marvinh.β€’6mo 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
πŸŽ€π”Έβ„•π”Ύπ”Όπ•ƒ π”»π•†π•ƒπ•ƒπ”½π”Έβ„‚π”ΌπŸŽ€πŸ‡΅πŸ‡Έ
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.
marvinh.β€’6mo ago
happy to help πŸŽ‰
πŸŽ€π”Έβ„•π”Ύπ”Όπ•ƒ π”»π•†π•ƒπ•ƒπ”½π”Έβ„‚π”ΌπŸŽ€πŸ‡΅πŸ‡Έ
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.
marvinh.β€’6mo ago
There are currently some discussions internally whether we should bring back deno bundle which does this for you
coty
cotyβ€’6mo ago
Everyone wants deno bundle back πŸ˜‚

Did you find this page helpful?