Webpack构建含ES6类的React项目失败，疑似配置缺失求助

你遇到的这个报错，核心原因是类字段语法（也就是你写的propTypes = { ... }这种在类内部直接定义属性的写法）不属于ES2015的标准语法，它是ECMAScript提案阶段的特性，而你当前配置的es2015和react Babel预设并没有包含转译这个特性的能力，所以Webpack用Babel处理代码时会抛出语法错误。

Next.js之所以能正常运行这段代码，是因为它内置了完整的Babel配置，默认支持这类提案特性，手动配置Webpack时就需要我们自己补上对应的插件。

下面是具体的解决方案：

方案一：适配你当前的Babel 6版本 #

1. 先安装转译类字段的插件：

npm install --save-dev babel-plugin-transform-class-properties

2. 修改你的.babelrc配置，添加这个插件：

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

或者也可以直接修改webpack.config.js里的babel-loader配置，把插件加到query中：

{ 
  test: /\.js?$/, 
  loader: 'babel-loader', 
  exclude: /node_modules/, 
  query: { 
    presets: ['es2015', 'react'],
    plugins: ['transform-class-properties']
  } 
}

方案二：升级到Babel 7（更推荐，Babel 6已停止维护） #

如果项目允许升级Babel版本，建议切换到Babel 7，它对新特性的支持更完善：

1. 安装必要依赖：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties babel-loader

2. 更新.babelrc配置：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

3. 同步修改webpack.config.js里的babel-loader配置：

{ 
  test: /\.js?$/, 
  loader: 'babel-loader', 
  exclude: /node_modules/, 
  query: { 
    presets: ['@babel/preset-env', '@babel/preset-react'],
    plugins: ['@babel/plugin-proposal-class-properties']
  } 
}

完成配置后重新运行Webpack构建，这个语法错误就能解决了。

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