Material-UI组件示例无法运行，App Bar示例报错求解决方案

你遇到的这个SyntaxError: Unexpected token错误，根源是类属性（Class Properties）语法没有被Babel正确转译。你代码里的state = {}以及箭头函数形式的类方法，都属于ES的实验性提案语法，默认不在你当前配置的env和react预设的转译范围内。

先看一下你遇到的报错信息：

ERROR in ./src/Root.js Module build failed: SyntaxError: Unexpected token (28:8)
26 |
27 | class MenuAppBar extends React.Component {

28 | state = {
| ^
29 | auth: true,
30 | anchorEl: null,
31 | };

对应的代码片段：

class MenuAppBar extends React.Component {
  state = {
    auth: true,
    anchorEl: null,
  };
  handleChange = (event, checked) => {
    this.setState({ auth: checked });
  };
  handleMenu = event => {
    this.setState({ anchorEl: event.currentTarget });
  };
  handleClose = () => {
    this.setState({ anchorEl: null });
  };
}

你的当前依赖版本：

• material-ui: ^1.0.0-beta.30
• react: ^16.2.0
• react-dom: ^16.2.0
• babel-cli: ^6.26.0
• babel-core: ^6.26.0
• babel-loader: ^7.1.2
• babel-preset-env: ^1.6.1
• babel-preset-es2017: ^6.24.1
• babel-preset-react: ^6.24.1
• webpack: ^3.10.0

原.babelrc配置：

{ "presets": ["env","react"] }

解决方案步骤 #

1. 安装Babel类属性转译插件
   在项目根目录下运行以下命令安装依赖：

npm install --save-dev babel-plugin-transform-class-properties
# 如果你用yarn的话：
# yarn add --dev babel-plugin-transform-class-properties

2. 修改.babelrc配置文件
   把刚刚安装的插件添加到配置中，修改后的.babelrc应该是这样：

{
  "presets": ["env", "react"],
  "plugins": ["transform-class-properties"]
}

3. 重启你的开发服务
   修改配置后，需要重启webpack或你的开发服务器，让新的Babel配置生效。

补充说明 #

类属性语法（包括类字段初始化、箭头函数类方法）属于ECMAScript的提案阶段特性，Babel的官方预设（比如env、react）不会默认包含这类实验性语法的转译，所以必须单独安装对应的插件来支持。

另外，如果你不想单独装插件，也可以安装babel-preset-stage-2及以上的预设（因为类属性在stage-2阶段被纳入），不过单独安装插件会更精准，减少不必要的转译内容。

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