bun Adding `bun-types` causes typescript to ignore `lib: ['dom']`

It's very possible that I'm using it wrong, but I tried converting the bun create react ./app to a typescript app instead of javascript, and noticed that when I add bun-types typescript will fail to recognize document:

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "target": "ESNext",
    "types": ["bun-types"],
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strictNullChecks": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

Full source code https://github.com/dkarter/bunny-app

The offending line is "types": ["bun-types"],. When removed the app compiles successfully.

Error:

src/index.tsx:10:3 - error TS2584: Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.

10   document.getElementById('root')
     ~~~~~~~~


Found 1 error in src/index.tsx:10

error "tsc" exited with 2 status

https://user-images.githubusercontent.com/551858/178082348-6fa7c200-8d53-4262-8ccc-72b8a2882708.mp4

Jul 08 '22 23:07 dkarter

Alternatively you can add a directive in a definitions file (i.e. bun.d.ts) within the source folder:

/// <reference types="bun-types" />

Jul 09 '22 20:07 fnky

Hitting this problem too! Any fixes you found @dkarter?

Jul 09 '22 23:07 kamesstory

Unfortunately not. I tried the directive approach but that didn't work. But if I figure it out I'm hoping to submit a bun create ts-react PR so that others don't have to do this conversation manually.

Jul 10 '22 02:07 dkarter

It seems like bun-types explicitly excludes default libs:

/// <reference no-default-lib="true" />

You can add additional directives to include lib definitions:

/// <reference types="bun-types" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />

Not an ideal approach, but works as a quick fix.

Jul 10 '22 09:07 fnky

Running into this problem in a "from scratch" app too, no react. Adding legacy reference is not ideal, but works when I add @fnky solution and remove bun-types from the types Array in tsconfig.json.

Jul 18 '22 06:07 steveblue

This is weird - Running into the same problem ... but "solved" by changing tsconfig.json using this wild guess

from "lib": ["ESNext", "dom"]

to "libs":["ESNext", "dom"]

... now it builds the full react-scripts build without error !!

Given there is no such directive "libs" in the tsconfig.json spec ... I suspect this is a bug in bun ? Dunno, seems weird, lets have a dig through the Zig code and have a look

Aug 24 '22 07:08 zigster64

from the tsconfig reference:

If types is specified, only packages listed will be included in the global scope

this means that as soon as you list bun-types like that ALL other types that would otherwise be globally available are discarded.

You can add them (back) to the global types piece by piece if you know their paths - e.g. typescript/lib/lib.

However, since this is quite tedious and might be harder to clean up than the bun.d.ts solution by @fnky once @types/bun is released I'll stick to the bun.d.ts approach.

Apr 10 '23 12:04 hesxenon

I added "web" to types and it solved this .:

 "types": [
      "web",
      "bun-types" // add Bun global
    ]
    ```

Jun 27 '23 06:06 JusttCallMeMike

I added "web" to types and it solved this .:
 "types": [
      "web",
      "bun-types" // add Bun global
    ]
    ```

?

Jun 27 '23 16:06 doroved

It seems like bun-types explicitly excludes default libs:
/// <reference no-default-lib="true" />
You can add additional directives to include lib definitions:
/// <reference types="bun-types" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
Not an ideal approach, but works as a quick fix.

After including this file in the project, Blob's json() disappears

Jun 27 '23 16:06 doroved

Hey guys. Based on the conversation here and what I have been doing lately:

We can get rid of the references, keep the default "bun-types" in and add "web" types that come from @types/web.

So to fix/workaround this for now:

Install the types bun add -d @types/web
Update tsconfig.json

{
  // ...
  "lib": ["ESNext", "DOM", "DOM.Iterable"],
  "types": ["web", "bun-types"]
}

Remove the references (if you added them)

- /// <reference types="bun-types" />
- /// <reference lib="dom" />
- /// <reference lib="dom.iterable" />

Works for #2050 as well.

Jul 15 '23 10:07 kocisov

Just came here after going down the rabbit hole a bit after finding this bit of the docs. @kocisov's fix of installing @types/web worked great. I much prefer this solution over the triple slash directives, hoping the Bun team blesses this or something like it as a good alternative.

If not, something like a bun-dom, bun-dom-iterable, bun-webworker types packages would be dope.

Sep 11 '23 22:09 taylorfsteele

Hey guys. Based on the conversation here and what I have been doing lately:

We can get rid of the references, keep the default "bun-types" in and add "web" types that come from @types/web.

So to fix/workaround this for now:

Install the types bun add -d @types/web

Update tsconfig.json
{
  // ...
  "lib": ["ESNext", "DOM", "DOM.Iterable"],
  "types": ["web", "bun-types"]
}
Remove the references (if you added them)
- /// <reference types="bun-types" />
- /// <reference lib="dom" />
- /// <reference lib="dom.iterable" />
Works for #2050 as well.