How to fix the error “Cannot find name ‘window’ or ‘document'” in TypeScript

If you are having trouble with the error “Cannot find name ‘window’ or ‘document'” in TypeScript, check out the solution we provide in this article. We have to edit the file ‘tsconfig.js’ to work around this problem. Keep reading for detailed instructions.

Why does this error occur?

This problem seems to occur because you set the ‘target’ option to ‘es2016’ for your project. Moreover, the error can also come from the ‘lib’ array in the ‘tsconfig.json’ file.

Take a look at the example below of how the error occurred. You will see the error message like this:

How to fix the error “Cannot find name ‘window’ or ‘document'” in TypeScript?

The first thing you need to do is opening the file ‘tsconfig.json’ and checking the values ​​in the ‘lib’ array. 

The lib option lets TypeScript know which definitions should be included.

When you run the code in the web browser, to use the ‘document’ and ‘window’ global variables in your TypeScript, you need to add the string ‘dom’ in the ‘lib’ array. Therefore, you must add the ‘dom’ string to the ‘lib’ array in tsconfig.json to avoid getting the error.

Your ‘tsconfig.json’ file should now look like this:

{
  "compilerOptions": {
    "lib": [
      "es2019"
      "dom"
    ],
  },
}

If the error persists, you can also check your ‘target’ option in the ‘tsconfig.json’ file. The ‘target’ property allows us to compile typescript code to a specific type.

You must ensure that the ‘target’ option in the ‘tsconfig.json’ file is set to value instead of blank. We recommend the ‘es6’ value for a stable version.

{
  "compilerOptions": {
    "target": "es6"
  }
}

All ES6 features are supported in today’s most advanced browsers, so try setting your target to ES6 or a later version.

If the above approach does not help, try to remove the file ‘package-lock.json’ and folder ‘node_modules’, then re-run the ‘npm install’ command. Here are the commands you can follow:

rm -f package-lock.json
rm -rf node_modules
npm install

Restarting the IDE and development server after successfully executing the above commands would be helpful.

Summary

In conclusion, to fix the error “Cannot find name ‘window’ or ‘document'” in TypeScript, you need to add string ‘dom’ to the ‘lib’ array and set the ‘target’ option to ‘es6’. That’s the end of this article. Hopefully, our solution will be helpful to you.

Maybe you are interested:

• Cannot find name ‘module’ Error in TypeScript
• Jest error Cannot find name ‘it’ in TypeScript
• Cannot find name ‘describe’ Error in TypeScript
• Cannot find name ‘require’ error in typescript
• Cannot find name ‘jQuery’ Error in TypeScript

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js