Getting a ReferenceError when trying to bundle a single TypeScript file with Bun

Question

When I run bun run index.ts I'm getting an error:

npm run start
Debugger attached.

> [email protected] start
> bun run index.ts

11 |     dialogCallback;
12 |     static PAGE_LOADED = "DOMContentLoaded";
13 |     constructor() {
14 |     }
15 |     static startWhenReady(ClassReference, startWith) {
16 |         window.addEventListener(BaseClass.PAGE_LOADED, (event) => {       
             ^
ReferenceError: Can't find variable: window
      at startWhenReady (BaseClass.js:16:9)
      at index.ts:12:11

Do I need to import something? Or tell Bun somehow that this is going to be run in the browser?

If I build index.ts with TypeScript I don't get any errors. Here's the my tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "Preserve",
    "inlineSourceMap": true,
    "esModuleInterop": true,  
    "forceConsistentCasingInFileNames": true, 

    "strict": true,
    "noImplicitOverride": true,
    "allowUnreachableCode": true,
    "skipLibCheck": true
  }
}

I've tried adding web libraries to it and I still get errors with bun run index.ts.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "Preserve",
    "inlineSourceMap": true,
    "esModuleInterop": true,  
    "forceConsistentCasingInFileNames": true, 
    "lib": ["es2022", "dom", "dom.iterable"],

    /* Type Checking */
    "strict": true,
    "noImplicitOverride": true,
    "allowUnreachableCode": true,
    "skipLibCheck": true
  }
}

index.ts:

import {BaseClass} from "base-class-ts/BaseClass"


export class MyClass extends BaseClass {

    constructor() {
        super();
        console.log("Hello world ...") 
    }
}

BaseClass.startWhenReady(MyClass);

I have been calling bun run start and now I think it's supposed to be, bun bun.build.js. This would point to my config file.

Answer 1

Running bun run some-file.ts is much like running node some-file.js: the window object isn't going to be there unless you're faking it with something like jsdom.

But bun has various APIs built in to it as well to be a "kitchen sink" tool. The one you seem to want is build:

bun bun.build.js

and then in your bun.build file something like this

await Bun.build({
  entrypoints: ['./index.ts'],
  outdir: './build',
});

You can also use the build subcommand directly instead of the Javascript API:

bun build ./index.ts --outdir ./build

Also note that the error you are seeing about window is a runtime error. It doesn't really have anything to do with Typescript: you're trying to run your file as a node.js program, so window will be undefined. You'll see that ReferenceError in strict mode or "cannot read property blah of undefined" in loose mode. Remember that if you get an actual Javascript error you've already made it past the TS compiler: tweaking the TS config might turn a runtime error into a compile-time one (e.g. by turning on strict null checking) but it can't in itself actually solve the problem.