戻る

VuePressを起動するとres.getHeader is not a functionエラーが発生する。

Published:  at  04:04

概要

VuePress 0.14.10をインストール後、開発環境でローカルサーバを起動しブラウザでアクセスするとエラーが発生する問題が発生しています。
件のエラーはこちらのISSUE 🔗で確認できます。

全て解決法はISSUEに書いてあるのでISSUEを見たほうが早い説ありますが記事に残しておきます。

このエラーはwebpackのとあるPullRequestが起因している様でプルリクがマージされた2019/03/06の次の日にはVuePress側でISSUEが上がっていました。
記事を執筆している2019/3/23 午前4時現在、ISSUEはOpenのままとなっています。

また、私が確認したVuePressバージョンは0.14.10のみでアルファ版の1.x系は確認しておりません。

目次

参考サイト様

環境

$ node -v
v11.12.0
$ npm -v
6.7.0
$ vuepress -V
0.14.10

事象

再現手順

インストール手順は下記の公式サイトのガイドにある通り実行しました。

$ mkdir sample
$ cd sample
$ npm init
$ npm install -g vuepress
$ echo '# Hello VuePress' > README.md
$ vuepress dev

ローカルサーバ起動後、ブラウザでhttp://localhost:8080/へアクセス。

エラー内容

ブラウザでhttp://localhost:8080/へアクセスすると下記のエラーが発生しました。

> VuePress dev server listening at (http://localhost:8080/)
(node:35968) UnhandledPromiseRejectionWarning: TypeError: res.getHeader is not a function
    at processRequest (/Users/<user>/.nodebrew/node/v11.12.0/lib/node_modules/vuepress/node_modules/webpack-dev-middleware/lib/middleware.js:82:18)
    at ready (/Users/<user>/.nodebrew/node/v11.12.0/lib/node_modules/vuepress/node_modules/webpack-dev-middleware/lib/util.js:51:12)
    at handleRequest (/Users/<user>/.nodebrew/node/v11.12.0/lib/node_modules/vuepress/node_modules/webpack-dev-middleware/lib/util.js:167:5)
    at Promise (/Users/<user>/.nodebrew/node/v11.12.0/lib/node_modules/vuepress/node_modules/webpack-dev-middleware/lib/middleware.js:44:7)
    at new Promise (<anonymous>)
    at middleware (/Users/<user>/.nodebrew/node/v11.12.0/lib/node_modules/vuepress/node_modules/webpack-dev-middleware/lib/middleware.js:43:12)
    at Promise.all.Promise (/Users/<user>/.nodebrew/node/v11.12.0/lib/node_modules/vuepress/node_modules/koa-webpack/index.js:43:7)
    at new Promise (<anonymous>)
    at /Users/<user>/.nodebrew/node/v11.12.0/lib/node_modules/vuepress/node_modules/koa-webpack/index.js:42:5
    at dispatch (/Users/<user>/.nodebrew/node/v11.12.0/lib/node_modules/vuepress/node_modules/koa/node_modules/koa-compose/index.js:42:32)
    at /Users/<user>/.nodebrew/node/v11.12.0/lib/node_modules/vuepress/node_modules/@shellscape/koa-static/legacy/index.js:58:19
    at Generator.throw (<anonymous>)
    at step (/Users/<user>/.nodebrew/node/v11.12.0/lib/node_modules/vuepress/node_modules/@shellscape/koa-static/legacy/index.js:6:221)
    at _throw (/Users/<user>/.nodebrew/node/v11.12.0/lib/node_modules/vuepress/node_modules/@shellscape/koa-static/legacy/index.js:6:455)
(node:35968) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:35968) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

原因

知識が乏しいので理解するに至ってないですが
Vue.jsの前段にあるwebpackのとあるPullRequestがマージされたところVuePressが動かなくなってしまったようです。
※該当のISSUE 🔗。

対策

解決方はwebpackのバージョンを落として使いましょうと言うことです。
バグが発生しているのが2019/3/23 現在、最新の3.6.1でバグが発生しない3.6.0にダウングレードして使いましょうねと言うことらしい。

実施手順

1. VuePressのアンインストール＆Nodeモジュールの削除

VuePressのアンインストールとNodeモジュールの削除を行い一旦きれいな状態にします。

$ npm uninstall -g vuepress
$ rm -rf node_module

2. webpackのインストール

バージョンをダウングレードしたwebpackをローカルにインストールします。
※ローカルインストール≠グローバルインストール

なぜローカルインストールなのかはISSUEからは読み取れませんでした。
グローバルインストールをしちゃうと他のプロジェクトに影響しちゃうからですかね？

$ npm install [email protected] --save-dev

3. VuePressの再インストール

再度、VuePressをインストールしています。

$ npm install -g vuepress
# 先に作成したものがあれば不要
$ echo '# Hello VuePress' > README.md

4. Packege.jsonのscripts編集

package.jsonのscriptsセクションを編集します。
このステップがなぜ必要でVuePressの公式ドキュメントで案内されているvuepress devではなぜダメなのかまでは読み取れてません。

下記の様に"dev": "vuepress dev"と"build": "vuepress build"を追記します。

{
  //省略
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build"
  },
  //省略
  "devDependencies": {
    "vuepress": "^0.14.10",
    "webpack-dev-middleware": "^3.6.0"
  },
  "Dependencies": {
    "vuepress": "^0.14.10",
    "webpack-dev-middleware": "3.6.0"
  }
}

5. 実行・確認

ローカルサーバを実行しブラウザでアクセスしてもエラーが発生しないかを確認します。

$ npm run dev

ローカルサーバ起動後、http://localhost:8080/へアクセスしHello Worldとイイ感じに表示されていれば解決。

雑感

npm使い慣れてないのでpackage.jsonの書き方調べたりなんだかんだ時間かかった。
軽くミニブログ作りたかっただけなのにこんなエラーに遭遇して時間を食うなんて…

Share this post on:
Share this post via WhatsApp Share this post on Facebook Share this post on X Share this post via Telegram Share this post on Pinterest Share this post via email
前の記事
VuePressのLastUpdated表示フォーマットを変更する。
次の記事
git mvでディレクトリ（フォルダ）をリネームする際にエラーが発生する