質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

7221閲覧

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

twin_bird

総合スコア230

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/01/02 16:05

環境

  • Laravel
  • React
  • webpack

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

package.json

1{ 2 "private": true, 3 "scripts": { 4 "prod": "gulp --production", 5 "dev": "gulp watch" 6 }, 7 "devDependencies": { 8 "babel": "^6.5.2", 9 "babel-core": "^6.21.0", 10 "babel-loader": "^6.2.10", 11 "babel-plugin-transform-runtime": "^6.15.0", 12 "babel-preset-es2015": "^6.18.0", 13 "gulp": "^3.9.1", 14 "laravel-elixir": "^6.0.0-14", 15 "laravel-elixir-webpack-official": "^1.0.10", 16 "lodash": "^4.16.2" 17 }, 18 "dependencies": { 19 "react": "^15.4.1", 20 "react-dom": "^15.4.1", 21 "semantic-ui-css": "^2.2.4" 22 } 23}

問題点

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

gulpfile.js

gulpfile.js

1const elixir = require('laravel-elixir'); 2elixir.config.sourcemaps = false; 3 4elixir((mix) => { 5 mix 6 .webpack( 7 '/admin/dashboard.js' 8 ) 9});

dashboard.js

dashboard.js

1import React, { Component } from 'react' 2import { Menu } from 'semantic-ui-react' 3 4export default class MenuExampleInvertedVertical extends Component { 5 state = { activeItem: 'home' } 6 7 handleItemClick = (e, { name }) => this.setState({ activeItem: name }) 8 9 render() { 10 const { activeItem } = this.state 11 12 return ( 13 <Menu inverted vertical> 14 <Menu.Item name='home' active={activeItem === 'home'} onClick={this.handleItemClick} /> 15 <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick} /> 16 <Menu.Item name='friends' active={activeItem === 'friends'} onClick={this.handleItemClick} /> 17 </Menu> 18 ) 19 } 20}

webpack.config.js

webpack.config.js

1var webpack = require('webpack'); 2 3module.exports = { 4 module: { 5 loaders: [ 6 { 7 exclude: /node_modules/, 8 loader: "babel", 9 query:{ 10 presets: ['es2015'] 11 } 12 } 13 ] 14 }, 15}

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 |

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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周りの設定を書き換えてください。

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

投稿2017/01/02 18:22

raccy

総合スコア21737

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

twin_bird

2017/01/07 09:50

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問