Deno: Cannot produce bundled code for browsers using Deno.bundle()

[denebu]

Thanks to make this awesome program. I like it!
Followed the issue #6516, I tried bundling some Deno scripts (which are importing React and ReactDOM from pikapkg) for browsers.

In order to run your compiled TypeScript code in the browser, you're going to need a compiler for that purpose (like tsc with an appropriate tsconfig.json or webpack, etc.)

Yes, you would likely get better results with other tools (tsc doesn't do any substantial bundling) but the compiler APIs (Deno.compile() and Deno.bundle()) are intended for this purpose as well, though they don't do minification or tree-shaking yet, which other tools do do.

(Cited from #6516)

However it threw an error. My code is as follows:

// script.ts

import { assert } from "https://deno.land/std/testing/asserts.ts";

const [diagnostics, emit] = await Deno.bundle("/index.tsx", {
  "/index.tsx":
    'import { React, ReactDOM } from "./deps.ts";\n\n//ReactDOM.render(<div></div>, document.getElementById("root"));',
  "/deps.ts":
    '// @deno-types="https://deno.land/x/types/react-dom/v16.13.1/react.d.ts"\nexport * as React from "https://cdn.pika.dev/@pika/react@^16.13.1";\n\n// @deno-types="https://deno.land/x/types/react-dom/v16.13.1/react-dom.d.ts"\nexport * as ReactDOM from "https://cdn.pika.dev/@pika/react-dom@^16.13.1";',
}, {
  "lib": ["DOM", "ES2019"],
});

assert(diagnostics == null);
console.log(emit);

The error is:

$ RUST_BACKTRACE=full deno run --unstable ./script.ts
thread 'main' panicked at 'Can't downcast ErrBox(JSError(JSError { message: "Uncaught AssertionError: Assertion failed.", source_line: None, script_resource_name: Some("$deno$/util.ts"), line_number: Some(35), start_column: Some(10), end_column: Some(11), frames: [JSStackFrame { type_name: Some("Object"), function_name: Some("assert"), method_name: Some("assert"), file_name: Some("$deno$/util.ts"), line_number: Some(35), column_number: Some(11), eval_origin: None, is_top_level: None, is_eval: false, is_native: false, is_constructor: false, is_async: false, is_promise_all: false, promise_index: Some(11) }, JSStackFrame { type_name: None, function_name: Some("buildLocalSourceFileCache"), method_name: None, file_name: Some("$deno$/compiler.ts"), line_number: Some(613), column_number: Some(7), eval_origin: None, is_top_level: None, is_eval: false, is_native: false, is_constructor: false, is_async: false, is_promise_all: false, promise_index: Some(7) }, JSStackFrame { type_name: None, function_name: Some("runtimeBundle"), method_name: None, file_name: Some("$deno$/compiler.ts"), line_number: Some(1566), column_number: Some(3), eval_origin: None, is_top_level: None, is_eval: false, is_native: false, is_constructor: false, is_async: false, is_promise_all: false, promise_index: Some(3) }, JSStackFrame { type_name: Some("global"), function_name: Some("tsCompilerOnMessage"), method_name: Some("onmessage"), file_name: Some("$deno$/compiler.ts"), line_number: Some(1671), column_number: Some(22), eval_origin: None, is_top_level: None, is_eval: false, is_native: false, is_constructor: false, is_async: false, is_promise_all: false, promise_index: Some(22) }, JSStackFrame { type_name: None, function_name: Some("workerMessageRecvCallback"), method_name: None, file_name: Some("$deno$/runtime_worker.ts"), line_number: Some(72), column_number: Some(33), eval_origin: None, is_top_level: None, is_eval: false, is_native: false, is_constructor: false, is_async: false, is_promise_all: false, promise_index: Some(33) }, JSStackFrame { type_name: Some("global"), function_name: None, method_name: None, file_name: Some("file:///Users/user/__anonymous__"), line_number: Some(1), column_number: Some(1), eval_origin: None, is_top_level: None, is_eval: false, is_native: false, is_constructor: false, is_async: false, is_promise_all: false, promise_index: Some(1) }], formatted_frames: ["Object.assert ($deno$/util.ts:35:11)", "buildLocalSourceFileCache ($deno$/compiler.ts:613:7)", "runtimeBundle ($deno$/compiler.ts:1566:3)", "tsCompilerOnMessage ($deno$/compiler.ts:1671:22)", "workerMessageRecvCallback ($deno$/runtime_worker.ts:72:33)", "file:///Users/user/__anonymous__:1:1"] })) to OpError', cli/op_error.rs:422:9
stack backtrace:
   0:        0x10edbf40c - <std::sys_common::backtrace::_print::DisplayBacktrace as core::fmt::Display>::fmt::h9310af08f3ce84da
   1:        0x10ede1d2e - core::fmt::write::hc0aa14019faca134
   2:        0x10edb7539 - std::io::Write::write_fmt::hd2830ca3f2078082
   3:        0x10edaa8ca - std::panicking::default_hook::{{closure}}::h4023b6274db11628
   4:        0x10edaa5ce - std::panicking::default_hook::h971f7dd24c691011
   5:        0x10edaae98 - std::panicking::rust_panic_with_hook::h88bf667ded98271c
   6:        0x10edaaa62 - rust_begin_unwind
   7:        0x10ee0b78b - std::panicking::begin_panic_fmt::habfc599ea530fe44
   8:        0x10d85cf92 - <deno::op_error::OpError as core::convert::From<deno_core::errors::ErrBox>>::from::{{closure}}::h00b9773a3c9a4f17
   9:        0x10d85cdae - <deno::op_error::OpError as core::convert::From<deno_core::errors::ErrBox>>::from::hde5f689c036fe73d
  10:        0x10d75bed1 - <core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll::h44456f0347b00ae4
  11:        0x10d7528db - <core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll::h0ec0422f52beebbf
  12:        0x10d965861 - <futures_util::future::future::map::Map<Fut,F> as core::future::future::Future>::poll::h25537d086b51664c
  13:        0x10d92a30d - <futures_util::future::future::flatten::Flatten<Fut,<Fut as core::future::future::Future>::Output> as core::future::future::Future>::poll::h0a495f33b830121b
  14:        0x10d965c43 - <futures_util::future::future::map::Map<Fut,F> as core::future::future::Future>::poll::h06ff4a3592e47a0b
  15:        0x10e1b1709 - <futures_util::future::future::map::Map<Fut,F> as core::future::future::Future>::poll::he87ef8983da1cd87
  16:        0x10e1c3e3e - <futures_util::future::future::Map<Fut,F> as core::future::future::Future>::poll::hd60e4fa239aba502
  17:        0x10e1ba245 - futures_util::stream::stream::StreamExt::poll_next_unpin::h6d3821f24b1794e8
  18:        0x10e1c0ca9 - <deno_core::core_isolate::CoreIsolate as core::future::future::Future>::poll::h621b3c4b9bbbfe1e
  19:        0x10e1b7ee8 - <deno_core::es_isolate::EsIsolate as core::future::future::Future>::poll::h9f621365840c118c
  20:        0x10d77bcff - <core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll::hba1981f32cfc80c1
  21:        0x10d71c412 - std::thread::local::LocalKey<T>::with::hab4c18cf5ec3e7b7
  22:        0x10d7a8f07 - tokio::macros::scoped_tls::ScopedKey<T>::set::h0f766d35df2a1ceb
  23:        0x10d84a6a2 - tokio::runtime::context::enter::h926b2c73a63ce025
  24:        0x10d8fa576 - deno::tokio_util::run_basic::hf89826a492699a00
  25:        0x10d86dd31 - deno::main::h2662055f97167e28
  26:        0x10d9af9d6 - std::rt::lang_start::{{closure}}::he12ba553872a314c
  27:        0x10edab19c - std::rt::lang_start_internal::h1c4c0818546e8ffd
  28:        0x10d870fc9 - main

It did not throw any command line errors while I am trying to command deno bundle --unstable -c ./tsconfig.json ./index.tsx instead of using Deno.bundle() API, but this did not produce expected bundled code too, throwing the same error message in browsers like #6516.

How could I bundle it for browsers as expected?
I am using macOS 10.15.5 and Deno 1.1.3. Thanks in advance.

[timonson]

I do produce code for the browser with Deno.bundle(). Check this out: https://github.com/timonson/shadowBase/blob/master/bundler.ts.

Run it with deno run --unstable -A bundler.ts yourFile.ts.

I hope this helps!

[denebu]

@timonson Thanks for your response.
Unfortunately, your solution did not work for me.

Both bundling via deno bundle command and via deno run --unstable -A bundler.ts yourFile.ts, your solution, did not occur any errors in the terminal. However, it occurs error Uncaught TypeError: deps_ts_1.React is undefined in the browser whenever importing React and ReactDOM libraries.

I think that Deno's bundler could not bundle correctly when given scripts contain some statements to do importing some remote libraries, including React and ReactDOM, but maybe not all.

[danvim]

I'm on Deno 1.4.3 and running your code yields:

error: Uncaught Error: Error in TS compiler:
AssertionError: Assertion failed.
    at assert (deno:cli/tsc/99_main_compiler.js:53:13)
    at buildLocalSourceFileCache (deno:cli/tsc/99_main_compiler.js:551:9)
    at runtimeBundle (deno:cli/tsc/99_main_compiler.js:1225:5)
    at tsCompilerOnMessage (deno:cli/tsc/99_main_compiler.js:1313:24)
    at <compiler>:1:12

    at Object.jsonOpAsync (core.js:236:13)
    at async Object.bundle (deno:cli/rt/40_compiler_api.js:87:20)
    at async file:///home/daniel/Documents/projects/deno-test/build.ts:1:32

I know the deno types don't work anymore, but it didn't help removing them. If I just remove all the imports and have '/index.tsx': 'console.log(0)', it compiles.