React入门遇Element type is invalid报错，VS2017环境求解决

嘿，我帮你揪出这个问题的根源啦！你遇到的这个报错，核心原因很简单：你在渲染<Button />组件的时候，这个组件还没被定义呢。

为啥会报错？ #

JavaScript里类声明虽然会被“提升”，但执行到ReactDOM.render那一行的时候，Button类还没完成初始化，所以React拿到的是undefined，自然就会抛出这个“组件类型无效”的错误啦。

怎么解决？ #

第一步：调整代码顺序（最关键！） #

把Button组件的定义挪到ReactDOM.render前面，让React在渲染的时候能找到这个组件：

import React from 'react'; 
import ReactDOM from 'react-dom';

// 先写组件定义
class Button extends React.Component { 
  render() { 
    return (<button>42</button>); 
  } 
}

// 再调用渲染
ReactDOM.render( 
  <Button />, 
  document.getElementById('root') 
);

第二步：确认Babel依赖装对了 #

看你的webpack配置用了babel-preset-env和babel-preset-react，先检查这些依赖有没有安装：

npm install babel-preset-env babel-preset-react --save-dev

要是你用的是Babel 7及以上版本，得用新的@babel系列预设，这时候要改两步：

1. 安装新依赖：

npm install @babel/preset-env @babel/preset-react --save-dev

2. 修改webpack.config.js里的预设配置：

options: {
  presets: ['@babel/preset-env', '@babel/preset-react']
}

第三步：重新打包测试 #

改完代码和配置后，再跑一遍打包命令：

npm run webpack

刷新页面，应该就能看到那个显示42的按钮啦！

内容的提问来源于stack exchange，提问作者ankur