127

For either case:

document.getElementById('body');
// or
window.document.getElementById('body');

I get error TS2304: Cannot find name 'window'.

Am I missing something in tsconfig.json for a definition file I should install?

I get the message when running tsc and in vscode

tsconfig.json:

{
    "compilerOptions": {
        "allowJs": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "jsx": "react",
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "sourceMap": true,
        "suppressImplicitAnyIndexErrors": true,
        "target": "ES2016",
        "typeRoots": [
            "node_modules/@types/",
            "typings/index.d.ts"
        ]
    },
    "exclude": [
        "node_modules",
        "**/*-aot.ts"
    ]
}

My Answer: For use with tsconfig.json I target es5 and use lib: ["es2015", "dom"]

2
  • 1
    Where do you get that error? In your IDE, or when running tsc? What is your current tsconfig.json file? You need to provide more relevant information if you want help Commented Dec 26, 2016 at 21:38
  • @NitzanTomer I added the information you requested. Commented Dec 26, 2016 at 22:21

7 Answers 7

169

use

"lib": ["dom"]

in tsconfig.json

e.g.

{
  "compilerOptions": {
    "lib": ["es5", "es6", "dom"],
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "jsx": "react"
  },
  "include": ["./src/**/*"]
}
5
  • 3
    FWIW this is what solved it for me. Should be the accepted answer, because in some situations (starter kits or tools that already take care of running tsc for you, you're not so easily able to change the CLI args passed to it, but you almost surely control tsconfig.json)
    – Ernesto
    Commented Sep 7, 2018 at 12:57
  • 3
    i have added this to my lib but its not still working. "lib": [ "es5", "es6", "dom", "dom.iterable", "esnext" ],
    – Adharsh M
    Commented Apr 1, 2021 at 0:01
  • Same @AdharshM...I wonder is there a recent issue? Commented Apr 1, 2021 at 0:51
  • I'm also encountering an issue, my code was working fine and then it wasn't, but I hadn't changed anything TS-related and was already using dom. I'll try use an older version of TS, I updated yesterday (but didn't notice this issue since) Commented Apr 1, 2021 at 14:07
  • 1
    @AdharshM This is likely due to github.com/lquixada/cross-fetch/issues/104, at least that was the case for me. Commented Apr 1, 2021 at 15:11
109

It seems that the problem is caused by targeting ES2016.
Are you targeting that for a reason? If you target es6 the error will probably go away.

Another option is to specify the libraries for the compiler to use:

tsc -t ES2016 --lib "ES2016","DOM" ./your_file.ts

Which should also make the error go away.

I'm not sure why the libs aren't used by default, in the docs for compiler options it states for the --lib option:

Note: If --lib is not specified a default library is injected. The default library injected is:
► For --target ES5: DOM,ES5,ScriptHost
► For --target ES6: DOM,ES6,DOM.Iterable,ScriptHost

But it doesn't state what are the default libraries when targeting ES2016.
It might be a bug, try to open an issue, if you do please share the link here.

10
  • Targeting ES6 did the trick! I originally targeted ES2016 because I plan to put the resulting javascript through webpack so I didn't think it would make much difference. Commented Dec 27, 2016 at 0:09
  • It makes sense to me that --libs would have to be explicitly declared instead of some arbitrary defaults. Commented Jan 9, 2017 at 8:53
  • 1
    I'm getting the same issue at code time in VSCode with an Angular 2 project built with Angular CLI, and switching to "es6" in both/either tsconfig.json and tsconfig.app.json didn't resolve it; neither did adding "dom" to tsconfig.json (it's already in tsconfig.app.json). There are no compile-time or runtime errors, but the red squiggly is annoying while coding.
    – S. G.
    Commented Mar 4, 2017 at 20:40
  • 7
    @S.Greylyn use "lib": ["dom"] in tsconfig.json. That worked for me. Commented May 30, 2017 at 16:56
  • 1
    @kolyaseg I believe I either found some VSCode setting that disabled linting for that particular error, or I just ignored it until that project was done, but I cannot rightly remember. Good luck.
    – S. G.
    Commented Dec 19, 2022 at 17:01
31

If you are using bun instead of node, then you need to use bun add @types/web -D.

The problem is explained at https://github.com/oven-sh/bun/issues/3030

Solution

https://github.com/oven-sh/bun/issues/463#issuecomment-1636727109

Note: Adding the types reference to your tsconfig.json, as explaining on the GitHub issue, looks not to be mandatory. Only installing the dependency looks enough to get rid of the error.

2
  • 8
    Thanks. This is the solution for bun for the moment. Commented Sep 23, 2023 at 6:57
  • 1
    Same here. i added to one of the monorepo packages the bun and it broke the types for all of the other packages. doing this resolve it.
    – Necmttn
    Commented Oct 20, 2023 at 9:33
15

Update: To avoid having to add these references to every file, see stackoverflow.com/a/77103144

I was using bun, and adding the following triple-slash directives at the top of the relevant TypeScript file solved it:

/// <reference lib="dom" />
/// <reference lib="dom.iterable" />

This is because setting "types": ["bun-types"] means TypeScript will ignore other global type definitions, including lib: ["dom"].

The same applies to other global type definition libs like webworker.

See how to add DOM types in bun's documentation for up-to-date information.

2
  • 1
    Bun's documentation mentions how to add DOM types without removing bun-types from your tsconfig.json types. Commented Aug 28, 2023 at 9:19
  • @NielThiart Thanks, i updated the answer to reflect the docs. Even though I haven't tested the solution, this fix sounds like it is a lot better.
    – Zikoat
    Commented Aug 28, 2023 at 11:40
6

For me, running this command fixed my issue.

npm add -d @types/web
2
  • same for me. Already had lib: ["dom"] was missing "types": ["web"] Commented Dec 11, 2023 at 10:20
  • This worked for me also. I had lib: ["ES2022", "dom"] on my tsconfig Commented Aug 28 at 3:24
1

What fixed it for me was changing tsconfig.json's "target" to "es6". It was "es2015" before.

0

So I tried all the above steps but I kept getting the error. I'm using Turbo so I have been experiencing a number of Eslint issues. I drew insipiration from Matt Pocock's article: How to Properly Type Window

So I created a file window.d.ts in my Next 14 project. Anything you place in a .d.ts automatically goes into the global scope, removing the need for declare global or simply retyping in all your components that need window.

// window.d.ts
interface Window {
  X: number;
  scrollY: number;
}

declare const window: Window & typeof globalThis;

This is not only just a hack for my setup but it allows me to properly type my Window type when I need properties such as X or scrollY.

Happy Hacking.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.