Filter を含む vue component を npm link で npm package として読み込むと error となる


#1

filter を含む component を別 component で npm package として相対パスで読み込んだ際、以下のエラーが出てしまいました。

解決方法をお分かりなる方いらっしゃいますか?

Cannot read property ‘filter’ of undefined

行った作業は以下の通りです。

前回の挙げた以下の質問

が未解決ですが、取り敢えず取り込む component を相対 path で使ってみました。

まず、npm package とする component (vue-component-b) に 以下の filter (suffix.js) を作成。

① の通り、filter に渡された値に文字列 .C を付加するだけの filter です。

次に、その filter を使う component (B1.vue) を以下のように作成。

② のように filter のファイルを component で読み込み、
③ のように文字列を filter に渡しています。

一旦この段階で、filter を含む component 内で yarn serve により動作確認してみると、以下の通り、入力文字列 B1.C を付け加えた形で出力できています。

20190130T094822

この component (vue-component-b) を npm package として取り込む、別の component (vue-component-a) を以下のように作成。

④ のように、取り敢えず相対パスで npm package 予定の component (vue-component-b) を取り込み、
⑤ のように挿入しています。

npm link による処理も行います。

  • vue-component-b
    • npm link
  • vue-component-a
    • npm link vue-component-b

その結果、vue-component-a 側で yarn serve によりページを表示してみると、以下のようなエラーが発生してしまいました。

npm package としての component を相対パスで取り込む際に、このエラーが出ないようにするにはどうしたら良いのでしょうか?


#2

ちなみに、
filter を含む component を相対パスを用いずに npm package として install した場合、

以下のように期待通り動きました。

20190130T100450

また、
filter を別ファイルとせず、以下のように component 内に記述した場合は、

npm package (vue-component-b) を相対パスで読み込んでも、以下のように期待通り表示されました。

20190130T110059