68

I am setting a web app up in TypeScript and I seem to be missing some basic types I need.

When I compile (npm run build), I get the following errors,

error TS2304: Cannot find name 'HTMLElement'.

error TS2304: Cannot find name 'SVGElement'.

error TS2304: Cannot find name 'EventTarget'.

error TS2304: Cannot find name 'TouchEvent'.

error TS2304: Cannot find name 'MouseEvent'.

error TS2304: Cannot find name 'PointerEvent'.

Based on my Googling I assuming I am missing something basic in my project setup. It seems like these types are just assumed to be there with Typescript.

EDIT: Specially it should be part of the ES6 types, https://github.com/Microsoft/TypeScript/blob/master/lib/lib.es6.d.ts.

Here is my package.json file:

{
  "name": "wip",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "dependencies": {
    "hammerjs": "2.0.8"
  },
  "devDependencies": {
    "@types/chai": "3.4.35",
    "@types/mocha": "2.2.39",
    "@types/node": "7.0.5",
    "@types/hammerjs": "2.0.34",
    "chai": "3.5.0",
    "mocha": "3.2.0",
    "safe-mock": "0.2.0",
    "ts-node": "2.1.0",
    "tslint": "4.5.1",
    "typescript": "2.2.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "scripts": {
    "test": "mocha test --require ts-node/register test/**/*.ts && npm run build",
    "dev": "webpack-dev-server --watch --content-base . -d --progress",
    "build": "tsc"
  },
  "author": "",
  "license": "ISC"
}

Any suggestions?

2
  • npm run-script build have you tried this command?
    – Smit
    Commented Mar 5, 2017 at 2:41
  • @Smit, yes, that is the command the leads to the compilation time type errors Commented Mar 5, 2017 at 2:42

2 Answers 2

134

Try adding the following lib section to your tsconfig.json file.

{
    "compilerOptions": {
        "lib": [
            "es2016",
            "dom"
        ]
    }
}
5
  • 2
    Fix it, thanks! Though I use es6 instead of es2016. Strange that I needed to do that because I had the type in my node_modules directory. Commented Mar 5, 2017 at 3:15
  • 1
    This is the correct solution, currently, but beware of this. Your build will not fail if you use a variable 'event' that is not defined in that file, because lib.dom.d.ts is declaring 'event' as well as a number of other very common variable names.
    – SgtPooki
    Commented May 31, 2018 at 19:00
  • It didn't work for me, sadly :/
    – psygo
    Commented Oct 12, 2022 at 2:00
  • this doesn't work on an nx workspace Commented Dec 18, 2022 at 11:24
  • 1
    Out of the blue, in a project that never gave me any grief before, I'm getting an error that document isn't defined. My compiler options, which are as above, haven't changed.
    – kshetline
    Commented Nov 1, 2023 at 3:01
2

Additional answer for testing.

If using mocha, you also need to tell mocha about the DOM environment using jsdom.

https://journal.artfuldev.com/unit-testing-node-applications-with-typescript-using-mocha-and-chai-384ef05f32b2

$ npm install jsdom jsdom-global --save-dev

So your "test" script would add -r jsdom-global/register:

{
  "scripts": {
    "test": "mocha test -r ts-node/register -r jsdom-global/register test/**/*.ts && npm run build"
  }
}

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.