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

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 — Nitzan Tomer
– Nitzan Tomer, Commented Dec 26, 2016 at 21:38

Damian Green · Accepted Answer · 2018-03-05 14:14:30Z

178

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

answered Mar 5, 2018 at 14:14

Damian Green

7,5852 gold badges36 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ernesto Over a year ago

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)

Adharsh M Over a year ago

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

Colin Sullivan Over a year ago

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

Vadorequest Over a year ago

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 Over a year ago

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

Nitzan Tomer · Accepted Answer · 2016-12-26 22:43:40Z

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.

answered Dec 26, 2016 at 22:43

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

10 Comments

Steven Bayer Over a year ago

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.

Shahar 'Dawn' Or Over a year ago

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

S. G. Over a year ago

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.

Andrew Mairose Over a year ago

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

S. G. Over a year ago

@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.

|

Soullivaneuh · Accepted Answer · 2023-12-28 17:49:15Z

33

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.

edited Dec 28, 2023 at 17:49

Soullivaneuh

3,8933 gold badges44 silver badges80 bronze badges

answered Sep 14, 2023 at 8:39

Alain1405

3,1052 gold badges27 silver badges46 bronze badges

2 Comments

Colin Keenan Over a year ago

Thanks. This is the solution for bun for the moment.

Necmttn Over a year ago

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.

Zikoat · Accepted Answer · 2023-11-07 08:50:42Z

17

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.

edited Nov 7, 2023 at 8:50

answered Mar 13, 2023 at 19:16

Zikoat

6658 silver badges21 bronze badges

2 Comments

Niel Thiart Over a year ago

Bun's documentation mentions how to add DOM types without removing bun-types from your tsconfig.json types.

Zikoat Over a year ago

@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.

Arash · Accepted Answer · 2023-10-04 09:57:43Z

8

For me, running this command fixed my issue.

npm add -d @types/web

answered Oct 4, 2023 at 9:57

Arash

1,8455 gold badges24 silver badges37 bronze badges

2 Comments

Code Uniquely Over a year ago

same for me. Already had lib: ["dom"] was missing "types": ["web"]

Harfel Jaquez Over a year ago

This worked for me also. I had lib: ["ES2022", "dom"] on my tsconfig

Allan Juan · Accepted Answer · 2022-02-22 18:15:00Z

1

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

answered Feb 22, 2022 at 18:15

Allan Juan

2,6923 gold badges26 silver badges55 bronze badges

Comments

Ian Samz · Accepted Answer · 2024-09-08 21:57:48Z

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.

Collectives™ on Stack Overflow

Typescript cannot find name window or document

7 Answers 7

5 Comments

10 Comments

Solution

2 Comments

2 Comments

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

10 Comments

Solution

2 Comments

2 Comments

2 Comments

Comments

Comments

Linked

Related