Typescript cannot find name window or document

C

6

125

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

Crinose answered 26/12, 2016 at 21:9 Comment(2)

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 – Piddling 26/12, 2016 at 21:38

@NitzanTomer I added the information you requested. – Crinose 26/12, 2016 at 22:21

P

108

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.

Piddling answered 26/12, 2016 at 22:43 Comment(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. – Crinose 27/12, 2016 at 0:9

It makes sense to me that --libs would have to be explicitly declared instead of some arbitrary defaults. – Isentropic 9/1, 2017 at 8:53

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. – Plotter 4/3, 2017 at 20:40

@S.Greylyn If there are no compile errors then it's an issue with your VSCode. I've never used it. – Piddling 4/3, 2017 at 23:25

@S.Greylyn use "lib": ["dom"] in tsconfig.json. That worked for me. – Liquesce 30/5, 2017 at 16:56

Baffled what target actually does, is it just for typedefs? And lib... is also for typedefs? – Faustena 7/3, 2018 at 17:22

@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. – Piddling 7/3, 2018 at 17:48

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. – Dermatophyte 4/10, 2019 at 7:43

@S.G. I have now the same issue after accidentely ctrl-clicked on window in code at VSCode Editor. I also have dom in tscofig lib setting. Did you solved the issue? – Istria 16/12, 2022 at 18:24

@Istria 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. – Plotter 19/12, 2022 at 17:1

M

165

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

Mohsen answered 5/3, 2018 at 14:14 Comment(5)

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) – Germano 7/9, 2018 at 12:57

i have added this to my lib but its not still working. "lib": [ "es5", "es6", "dom", "dom.iterable", "esnext" ], – Jedidiah 1/4, 2021 at 0:1

Same @AdharshM...I wonder is there a recent issue? – Rhyme 1/4, 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) – Lectern 1/4, 2021 at 14:7

@AdharshM This is likely due to github.com/lquixada/cross-fetch/issues/104, at least that was the case for me. – Lectern 1/4, 2021 at 15:11

P

108

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