Npm link の後、vue component を import すると not found となる


#1

Veu CLI 3 を使い、以下の設定でプロジェクトを2つ (a, b) 作成しました。

20190128T160234

project b で作成した component を npm package として project a に取り込んで表示させることが狙いです。

その前段階として npm link を使って local で表示させることにしました。

まず project b の vue component B.vue を以下のように作成。

project b の package.json を以下のように設定。

yarn build により dist/B.umd.js ④ を生成し、package.json の main にその path を設定 (②)。

一方、project b の component を取り込む側の project a に vue component A.vue を以下のように作成。

20190128T165611

  • ⑤ … project b から component B を取り込み
  • ⑥ … components に B を設定
  • ⑦ … template 内に <B> を挿入

project a の package.json は vue cli 3 による生成後から変更していません。

次に、project b 内で npm link を実行。

$ pwd
C:\…\b

$ npm link
C:\Users\8cf022\AppData\Roaming\npm\node_modules\b
-> C:\…\b

続いて、component <B> を使う側の project a 内で npm link b を実行。

$ pwd
C:\…\a

$ npm link b
C:\…\a\node_modules\b
-> C:\Users\8cf022\AppData\Roaming\npm\node_modules\b
-> C:\…\b

以上を終わらせ、project a 側で yarn serve とすると、以下の warning が出ます。

export ‘default’ (imported as ‘B’) was not found in ‘b’

20190128T163856


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

(…続きです)

当然 <B> は以下の通り表示されません。

20190128T173250

どのように変更すれば not found となっている component <B> を表示させることができるのでしょうか?

ちなみに、以下のように変更すると、取り敢えず <B> を表示できることは確認しています。

import '../../node_modules/b/dist/B.umd.js'

20190128T165831

20190128T164341

上記 ⑧ のような書き方をせずに、普通に前記 ⑤ のような書き方で済めばいいのですが、warning の解決方法が分かりません。

お分かりになる方いらっしゃいませんか?

以下のサイトを参照しています。

また、環境は以下の通りです。

20190128T170116

20190128T191101