Typescript cannot find name window or document

Question

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"]

Solution 1

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.

Solution 2

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/**/*"]
}

Comments

[Steven Bayer]

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.

[mightyiam]

It makes sense to me that --libs would have to be explicitly declared instead of some arbitrary defaults.

[S. G.]

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.

[Nitzan Tomer]

@S.Greylyn If there are no compile errors then it's an issue with your VSCode. I've never used it.

[Andrew Mairose]

@S.Greylyn use "lib": ["dom"] in tsconfig.json. That worked for me.

[Dominic]

Baffled what target actually does, is it just for typedefs? And lib... is also for typedefs?

[Nitzan Tomer]

@DominicTobias target specifies to which version of js the output of the compilation. For example, if you want your code to run on older browsers, you don't want es6 feature (and above). The lib option has default values based on the target. You can override the defaults if you're sure that the environment at runtime does include the features.

[Ernesto]

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)

[horstwilhelm]

Also of note: If you already have lib in your tsconfig.json, it might help to remove it again. lib will be autofilled with what makes sense for your target but if you have already defined lib, it will be left as-is, meaning you might miss some libs.

[Adharsh M]

i have added this to my lib but its not still working. "lib": [ "es5", "es6", "dom", "dom.iterable", "esnext" ],

[Colin Sullivan]

Same @AdharshM...I wonder is there a recent issue?

[Vadorequest]

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)

[Vadorequest]

@AdharshM This is likely due to github.com/lquixada/cross-fetch/issues/104, at least that was the case for me.