Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

結論

  • browserifytransform の指定に誤りがある
  • babelify を使用してトランスパイルする場合は以下のように記述する
package.json
{
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "es2016"
          ]
        }
      ]
    ]
  }
}

現象と原因

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

~/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.jspublic/bundle.js が悪いのか?と思って色々調べたんですがそんなところが問題ではなく、package.json に追記していた browserifytransform の指定に誤りがあったことが原因でした。

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


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

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

Kazunori-Kimura
フリーランスのプログラマーです。JavaScript好き。 C#, Javaもやれます。 お仕事ください。
https://kazunori-kimura.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away