模块构建错误

Question

我正在尝试设置一个WebpackBin，因为我最终需要帮助，我将在未来发布一个问题（我希望能够提供一些代码来检查和调试，而不仅仅是代码来猜测）但我是得到一个我在实际应用程序中没有得到的lint错误。

Module build failed: SyntaxError: Unexpected token (107:10)

  105 |   
  106 | 
  107 |  onChange = (event, { newValue, method }) => {
      |           ^
  108 |     this.setState({
  109 |     value: newValue
  110 |     });

以下是webpackBin

一旦它没有错误，我会发布我遇到的实际问题/问题。

作为旁注，这应该按原样运作。它在我的应用程序中为我工作。我还没有将问题区域添加到此代码中。一旦运行，我会这样做然后发布问题。

这是它运行后的样子（减去样式）

提前谢谢

Answer 1

您只需在webpackbin配置中启用stage-0或Class properties transform即可摆脱该错误。

你在这里onChange = (event, { newValue, method }) =>的内容是

的混合

1. arrow functions
2. class properties

这只是＆＃34;标准js＆＃34;的语法糖。

你可以在不使用它们的情况下实现同样的目标。

class YourComponent extends React.Component{

   constructor(props){
     super(props);
     this.onChange = this.onChange.bind(this);
   }

   onChange(event, { newValue, method }){
      ...
   }
   ...
}

关于stage-0，当您将其添加到您的babel配置中时，您将包含所有可用的experimental个插件。

Answer 2

您在类中的函数在语法上被声明错误，您应该使用以下语法：

 onChange = (event, { newValue, method }) => {
    this.setState({
      value: newValue
    });
 };

使用以下语法：

 onChange(event, { newValue, method }) {
    this.setState({
      value: newValue
    });
 };

Updated Bin