webpack + bower でライブラリを読み込めない！

症状

webpack + bower な環境で、 特定のライブラリをパッケージ名でrequireできない！

Module not found: Error: Cannot resolve module 'jquery.simulate'

なぜだ！！

以下、jquery.simulateを例に説明。

bower_components/jquery.simulate/bower.jsonに "main":プロパティが無いならまだわかる。

webpackでbower使って外部ライブラリの依存解決する - Qiita

ここで紹介されているように、"main":が設定されていなければ、 どのファイルを読めばいいのかわかんないもんな。わかるわかる。

でも、jquery.simulateには"main":は設定されてるんだよね。

なぜだ！！

原因

読み込めないライブラリの共通点。それは

bower.jsonの"main":に配列が指定されている！！

bower/bower.json-spec · GitHub

bower.jsonの仕様としては正しいはずなんだけどね。

Resolve main entry for bower and component · Issue #3 · webpack/enhanced-resolve · GitHub

既知の問題としてissueに上がっていた。 配列だとwebpackのResolverPlugin.DirectoryDescriptionFilePluginでは読み込めないらしい。

解決策

Resolve `main` field as array for Bower by mrm007 · Pull Request #4 · webpack/enhanced-resolve · GitHub

こちらで解決されていた。

bower-webpack-pluginで解決できた。

github.com

余談

というか、いろんなページで紹介されているwebpack + bowerの構築法だと、 ResolverPlugin.DirectoryDescriptionFilePlugin使ってるんだけど、

例: webpackでbower使って外部ライブラリの依存解決する - Qiita

この問題かなりの罠だと思うんだよね...

入門するときには、このプラグインがデフォルトになってもいいんじゃないかって思うな...