typescript - React TypeScript 应用程序获取 'TS2304: Cannot find name ' 文本'。'

Question

这是我的 package.json 中的依赖项。过去这对我有用。

{
  "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"
  }
}

我的 tsconfig.js 看起来像

"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

当我执行 yarn start 时出现错误

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

我上周使用完全相同的 package.json 创建了一个应用程序，并且它没有出现这些错误。

编辑::根据下面的答案，我尝试了两件事

tsconfig.js

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

现在当我执行 yarn start 时出现错误

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

我也试过

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

现在我得到错误

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

我去了 typescript 的gitter channel ，在那里问了这个问题。我得到了一个有效的解决方案，我将其列在此处。

我需要将 @types/node 版本 9 添加到我的 package.json 中。所以工作 package.json 看起来像

{
  "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"
  }
}

tsconfig.json 看起来像

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