reactをwebpackでビルドした際にSyntaxError: Unexpected token

Question

環境

• Laravel
• React
• webpack

npmパッケージは以下の通りです。

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-webpack-official": "^1.0.10",
    "lodash": "^4.16.2"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "semantic-ui-css": "^2.2.4"
  }
}

問題点

LaravelのElixirを使ってreactのビルドをしているのですが、よくわからないところでSyntaxError: Unexpected tokenのエラーがでてしまいます。

gulpfile.js

const elixir = require('laravel-elixir');
elixir.config.sourcemaps = false;

elixir((mix) => {
    mix
        .webpack(
            '/admin/dashboard.js'
        )
});

dashboard.js

import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'

export default class MenuExampleInvertedVertical extends Component {
  state = { activeItem: 'home' }

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      <Menu inverted vertical>
        <Menu.Item name='home' active={activeItem === 'home'} onClick={this.handleItemClick} />
        <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick} />
        <Menu.Item name='friends' active={activeItem === 'friends'} onClick={this.handleItemClick} />
      </Menu>
    )
  }
}

webpack.config.js

var webpack = require('webpack');

module.exports = {
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: "babel",
        query:{
          presets: ['es2015']
        }
      }
    ]
  },
}

gulpをした時のエラーは以下の通りです。

{ [Error: ./resources/assets/js/admin/dashboard.js
Module build failed: SyntaxError: Unexpected token (5:8)

  3 |
  4 | export default class MenuExampleInvertedVertical extends Component {
> 5 |   state = { activeItem: 'home' }
    |         ^
  6 |
  7 |   handleItemClick = (e, { name }) => this.setState({ activeItem: name })
  8 |

BabelLoaderError: SyntaxError: Unexpected token (5:8)

  3 |
  4 | export default class MenuExampleInvertedVertical extends Component {
> 5 |   state = { activeItem: 'home' }
    |         ^
  6 |
  7 |   handleItemClick = (e, { name }) => this.setState({ activeItem: name })
  8 |

エラーの原因がよくわからないのですが、どこが問題なのでしょうか・・？

Answer 1

classのコンテキストにフィールド(プロパティ)を直接書く方法をpublic class field(class property)と言いますが、この文法は、現在Stage 2です。

Stage 2 proposal for public class fields in ECMAScript
Class properties transform · Babel

Stage2はどういう段階かというと、まだ**ドラフト(草案)**ということです。そのため、下記の点に注意が必要です。

• 仕様は未完成です。構文や動作が変更される可能性があります。
• 最終的にECMAScriptの仕様として取り込まれない可能性があります。取り込まれる場合でも、現段階ではいつになるか不明です。(仕様が完成後に、少なくとも二つ以上のブラウザでの実装が必要です。現在対応したブラウザはありません)

ドラフトですので、es2015にもes2016にも含まれていません。Babelではstage-2のpresetを読み込むか、個別でpluginを読み込む(上のBabelのClass proertiesのリンク先参考)必要があります。必要なモジュールを読み込み、babelのpreset周りの設定を書き換えてください。

個人的には、まだドラフト段階の機能と言うこともあり、使用しない方が無難かと思います。

Comments

[twin_bird]

詳細な回答ありがとうございます！