导入反应方式有什么问题

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警告。

Answer 2

这是一个错误，指出您已经在React占位符中导入了React，但是从未使用过，这可以被视为仅仅是警告。每当您开始使用此占位符时，警告就会消失。