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

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

(…続きです)

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

20190128T173250

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

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

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

20190128T165831

20190128T164341

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

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

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

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

20190128T170116

20190128T191101

rollup 使ってなかったので以下を試さなかったけど、その通りやってみたら npm link でも外部 component を読み込めました。

途中でエラー出ますが、

以下を参考にするとクリアできました。

Vue Component, Nuxt 両方で読み込み可能。
下図の時刻部分が npm link で読み込んだ外部 component により表示させたものです。

20190503T172115

20190503T171956

npm package の dist/ から esm ファイルを消してみると、以下のようにエラーが出るので、esm で読み込まれているのでしょう。以前出ていたエラーはこの違いが原因かな。

webpack では esm 出力が無かったと思うので、敢えて umd に指定していました。

esm ファイルを消し、umd ファイルのみにすると、前回と同じエラーが出ます。

20190503T170326