browserify で `TypeError: Path must be a string.` というエラーが出る

表題のエラーで 15分くらい悩んで色々と検索したけど適切な解決策がヒットしなかったので、しょーもない内容ですが書き残しておきます。

結論

• browserify の transform の指定に誤りがある
• babelify を使用してトランスパイルする場合は以下のように記述する

package.json

{
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "es2016"
          ]
        }
      ]
    ]
  }
}

現象と原因

browserify で require を解決してファイル結合を試みたところ、以下のようなエラーが出ました。

~/Repository/my-project $ npm run build:browserify

> my-project@1.0.0 build:browserify /Users/kimurakazunori/Repository/my-project
> browserify "src/index.js" > "public/bundle.js" --debug

TypeError: Path must be a string.
    at resolve (/Users/kimurakazunori/Repository/my-project/node_modules/resolve/lib/async.js:15:19)
    at nr (/Users/kimurakazunori/Repository/my-project/node_modules/module-deps/index.js:282:24)
    at /Users/kimurakazunori/Repository/my-project/node_modules/resolve/lib/async.js:17:13
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)
# 以下略

Path must be a string. ということなので browserify に渡した src/index.js や public/bundle.js が悪いのか？と思って色々調べたんですがそんなところが問題ではなく、package.json に追記していた browserify の transform の指定に誤りがあったことが原因でした。

transform の指定、本来は配列が2重になっていないといけないのに、一個抜けてただけでした。

---

設定ファイルが増えるのが嫌なので package.json に browserify の設定も書いてしまうんですが、babelify の presets を指定する際の object や array の書き方が直感的ではないので間違いやすいです。

面倒でも babelify の設定は .babelrc に、transform の指定は -t オプションでやってあげる方が記載自体がシンプルになり、間違いを回避出来る気がします。