めもめも のーと

ハマったこととか、覚えたこととか

webpack-dev-serverが起動できず Unexpected token: name

webpackでローカルサーバを起動するためにwebpack-dev-serverを起動しようとしたら Unexpected token: name (urlParts)というエラーが出た。 日本語の解決記事が見つからなかったので残す。ちなみに原因はバージョン差異ということ以外は不明。。

環境

Mac OS X 10.11.6
npm 5.4.2
node v8.7.0 (nodebrewで管理)

経緯

# package.json
{
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "webpack": "^3.8.0"
  }
}

# webpack.config.js
var webpack = require('webpack');
module.exports = {
  entry: './src/main.js',
  output: {
    path: `${__dirname}/build`,
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: 'build',
    port: 8081
  },
  devtool: 'source-map',
  plugins: [
    // JSファイルのminifyを実行する
    new webpack.optimize.UglifyJsPlugin({
      // minify時でもソースマップを利用する
      sourceMap: true
    })
  ]
};

上記のpackage.jsonでサーバを起動したら、下記エラーが発生。

$ npm run start

> @ start /Users/hogehoge/study/webpack/myproject
> webpack-dev-server

(...省略...)

ERROR in bundle.js from UglifyJs
Unexpected token: name (urlParts) [(webpack)-dev-server/client?http:/localhost:8081:24,0][bundle.js:3694,4]
webpack: Failed to compile.

ググった結果、webpack-dev-serverのバージョンが新しいため?との情報 を得たので、 バージョンを落として再度インストールしてみた。 https://github.com/webpack/webpack-dev-server/issues/1101

$ npm uninstall webpack-dev-server
$ npm install -D webpack-dev-server@2.7.1

再度npm run startを実行すると、無事にサーバが起動した。

なおバージョンはどこまであげられるのか試したところ、2.8.0では同様のエラーとなってしまったため、 2.7系の最新である2.7.1までという結果になった。