javascript - 导入react的方式有什么问题

Question

我最近遇到导入错误。
如果我通过 import React from 'react' 导入 React，vscode 会提示错误(如下图)，但是 import * as React from 'react' 可以修复这个错误，我猜我的 babel 配置有问题，问题出在哪里？

下面是 package.json 文件:

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/react": "^16.9.13",
    "@types/react-dom": "^16.9.4",
    "@types/react-redux": "^7.1.5",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/preset-react": "^7.7.4",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    // other dependencies...
  }
}

Answer 1

在 tsconfig.json 文件的编译器选项中，将 esModuleInterop 设置为 true。

 {
   "compilerOptions": {
      "esModuleInterop": true,

然后您将能够正确导入它，而不会出现 TS 警告。