javascript - ReactJS - 模块构建失败 : SyntaxError: Unexpected token react components not rendering

Question

我返回一个像这样的 react 组件:

return (
    <section style={styleObj} id="Profile" >
      <h2 className="colorHeader">{this.state.color}</h2>
      <input id="colorInput" placeholder="Enter Hex Code Here" onChange={this.changeColor.bind(this)}/>
      <div id="slider"></div>
    </section>
  );

这会导致:

ERROR in ./app/js/modules/colorpicker.js
Module build failed: SyntaxError: Unexpected token (31:4)

  29 |
  30 |   return (
> 31 |     <section style={styleObj} id="Profile" >
     |     ^
  32 |       <h2 className="colorHeader">{this.state.color}</h2>
  33 |       <input id="colorInput" placeholder="Enter Hex Code Here" onChange={this.changeColor.bind(this)}/>
  34 |       <div id="slider"></div>

据我目前的理解，你需要一个 babel 转译器才能正确转换它。我的 webpack 配置的相关部分如下所示:

module: {
  rules: [{
      test: /\.js$/,
      use: 'babel-loader'
    }]
  },

我做了更多研究并尝试了这个:

loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        query  :{
          presets:['react','es2015']
        }
        exclude: /node_modules/
      }
    ]

这将返回:

Module build failed: Error: Couldn't find preset "react" relative to directory

So I referenced this question and tried this:

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

仍然得到:

Module build failed: Error: Couldn't find preset "react" relative to directory

如何使用 webpack 配置正确渲染 React 组件？

链接的答案建议 npm ls babel-preset-es2015 得到:

new_platform_prototype@1.0.0 /projects/new-platform-prototype └── babel-preset-es2015@6.24.1

Answer 1

npm install -D babel-preset-react babel-preset-es2015

这应该可以解决您的问题。