React TypeScript Application gets 'TS2304: Cannot find name 'Text'.'

Question

This is the dependencies in my package.json. this used to work for me in the past.

{
  "name": "login-ts-react",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "repository": "https://github.com/abhsrivastava/login-ts-react.git",
  "author": "Abhishek Srivastava <abhsrivastava@foo>",
  "license": "MIT",
  "dependencies": {
    "react": "^16.3.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "@types/react": "^16.3.13",
    "@types/react-bootstrap": "^0.32.9",
    "@types/react-dom": "^16.0.5",
    "awesome-typescript-loader": "^5.0.0",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "import-glob-loader": "^1.1.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "source-map-loader": "^0.2.3",
    "style-loader": "^0.21.0",
    "typescript": "^2.8.3",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  }
}

My tsconfig.js looks like

"target": "es5",
"lib": ["es6"],
"module": "commonjs",
"jsx": "react",
"sourceMap": true,
"outDir": "./build",
"removeComments": true,
"strict": true,
"noImplicitAny": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": "./src",
"esModuleInterop": true

When I do yarn start I get error

ERROR in [at-loader] ./node_modules/@types/react-dom/index.d.ts:19:72
    TS2304: Cannot find name 'Text'.

ERROR in [at-loader] ./src/index.tsx:6:28
    TS2304: Cannot find name 'document'.

I had created an application last week with this very same package.json and it was working without these errors.

Edit:: Based on the answers below I tried two things

tsconfig.js

"target": "es6",
"lib": ["es6"],
"jsx": "react",

Now when I do yarn start I get error

ERROR in [at-loader] ./node_modules/@types/react-dom/index.d.ts:19:72
    TS2304: Cannot find name 'Text'.

ERROR in [at-loader] ./src/index.tsx:5:28
    TS2304: Cannot find name 'document'.

I also tried

"target": "es5",
"lib": ["es6", "dom"],
"module": "commonjs",

Now I get error

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2381:15
    TS2300: Duplicate identifier 'URL'.

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2399:15
    TS2300: Duplicate identifier 'URLSearchParams'.

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2417:14
    TS2661: Cannot export 'URL'. Only local declarations can be exported from a module.

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:2417:19
    TS2661: Cannot export 'URLSearchParams'. Only local declarations can be exported from a module.
Child html-webpack-plugin for "index.html":

Answer 1

make sure you are using .tsx for files having html tags.

Answer 2

I went to the gitter channel of typescript and asked the question there. I got a solution which is working and I am listing it down here.

I needed to added @types/node version 9 to my package.json. So the working package.json looks like

{
  "name": "login-ts-react",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "repository": "https://github.com/abhsrivastava/login-ts-react.git",
  "author": "Abhishek Srivastava <abhsrivastava@foo>",
  "license": "MIT",
  "dependencies": {
    "react": "^16.3.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "@types/react": "^16.3.13",
    "@types/node": "9.6.7", // <- right here
    "@types/react-bootstrap": "^0.32.9",
    "@types/react-dom": "^16.0.5",
    "awesome-typescript-loader": "^5.0.0",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "import-glob-loader": "^1.1.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "source-map-loader": "^0.2.3",
    "style-loader": "^0.21.0",
    "typescript": "^2.8.3",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  }
}

and the tsconfig.json looks like

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom"], // <- right here
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true, 
    "outDir": "./build",
    "removeComments": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": "./src",
    "esModuleInterop": true
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

Answer 3

This is probably caused by the following setting in your tsconfig.json:

...
"target": "es5",
"lib": ["es6"],   <- right here
...

Here, you're explicitly telling the tsc you want to have es5 javascript (target configuration). At the same time, you're saying you want to include the es6 built in type declarations (and the es6 built in type declarations only).

Now, this isn't a problem in itself, tsc will allow you to do that (though I would debate the point of this: your code will break on non es6 browsers unless you provide polyfills in your build pipeline). However, if you're telling tsc the libs you want explicitly you have to make sure you don't forget any typings you will need in your App. Long story short, if you want to create a Web Application with Typescript, you typically also want to have the dom declarations in order to have access to DOM interface typings such as document or Text. The typescript developers decided to modularize built in library definitions starting in typescript 2 (think of contexts where DOM type declarations make no sense, such as developing a node.js app!).

Here's how I'd advise you to change your tsconfig.json:

"target": "es6",
"module": "commonjs",
"jsx": "react",
...

Getting rid of lib will give you the default: "lib": ["es6", "dom"] (depending on the target you set). Since it seems you want to use es6 in your project, set this as your transpilation target.

If you want to keep es5 as your target, and also want to be explicit about lib, this should make your app compile (though I can't recommend this, for reasons stated above)

"target": "es5",
"lib": ["es6", "dom"]
"module": "commonjs",
"jsx": "react",
...