エンジニアになりたい

エンジニアです

Phoenix+Babel環境でWebSocketを扱う際にエラーが出る

Phoenix Elixir Babel Javascript Websocket

Phoenixを使ってWebSocketを扱う際に、クライアントサイドをBabelを使って書いていると以下のようなエラーに出会った。

ERROR in ./deps/phoenix/web/static/js/phoenix.js
Module build failed: TypeError: work_space_path/deps/phoenix/web/static/js/phoenix.js: Duplicate declaration "channel"
  454 | 
  455 |   channel(topic, chanParams = {}){
> 456 |     let channel = new Channel(topic, chanParams, this)
      |         ^
  457 |     this.channels.push(channel)
  458 |     return channel
  459 |   }

/deps/phoenix/web/static/js/phoenix.js はPhoenixが提供している、channel機能を抽象化したJavascriptライブラリである。これを使うと、サーバーサイドのPhoenixとクライアントサイドのJavascript間のWebSocket通信処理を簡単に記述することが出来る。

その phoenix.js を使用すると、上記の通り Duplicate declaration "channel" と言われてしまった。

原因はクライアントサイドをBabelのES2015 transpilerを使って書いているところにあった。これを使っていると、 channel という変数が二重に宣言されていると怒られてしまうようだ。

そこで以下のように phoenix.js を変更すれば良い。

// before
channel(topic, chanParams = {}){
  let channel = new Channel(topic, chanParams, this)
  this.channels.push(channel)
  return channel
}

// after
channel(topic, chanParams = {}){
  let channelInstance = new Channel(topic, chanParams, this)
  this.channels.push(channelInstance)
  return channelInstance
}

ちなみに↑は以下のPRを参考にした。

github.com