質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

0回答

229閲覧

npm installを行ったことで、いくつかのモジュールが動かなくなりました

MYG

総合スコア3

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2021/07/15 09:18

編集2021/07/19 02:43

前提・現状

Nuxtで作っているWebアプリケーションで、Contentfulを使えるようにしようと思って

npm install @contentful/rich-text-react-renderer

を実行しました。


Contentfulはちゃんと動いたのですが、これまで動いていたinfinite-loadingなどが

cannot call a class as a function

のエラーとともに、動かなくなってしまいました。

試したこと

npm install前後でnpm listを実行してみたところ、以下の変化が見られました。
(例はinfinite-loadingですが、その他にも多くのモジュールで同じ変化がありました)

■実行前
UNMET DEPENDENCY vue-infinite-loading@2.4.5

■実行後
vue-infinite-loading@2.4.5

また、node_modules以下のファイルは、npm installをしたことでかなりの数が減っていました。

知りたいこと

「UNMET DEPENDENCY」について調べてみて、「依存関係がインストールされていない」ことによるメッセージだということは把握しました。
→npm installで表示が消えたということは、依存関係が解決された?

ただそうなのだとしたら、

  • なぜ、npm install前は動いていたのでしょうか
  • なぜ、npm installによって、ファイルが消えたのでしょうか

(依存関係の解決のため、増えるならわかります)

  • これまでの動きを担保したまま、今後npm installを使用していく方法はあるのでしょうか

infinite-loadingはたまたま動かなくなったことを見つけましたが、そもそも他にも動かなくなっているモジュールは多々あるのではないかと思います。
そのため、特定のモジュールだけではなく、npm listで出てきた「UNMET DEPENDENCY」に対する一般的な対応方法を教えて頂けると嬉しいです。

以上、よろしくお願いいたします。

追記(7/19)

失礼しました、動かなくなっていたのはinfinite-loadingではなく、loadingの部分でした。

■nuxt.config.js

loading: { color: '$primary' },

■vueファイル

this.$loading.show();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/07/17 09:39

> これまで動いていたinfinite-loadingなどが 「元のコードの書き方が悪かった」などの可能性はないでしょうか?
MYG

2021/07/19 01:56

あるかもしれません。 infinite-loadingに関する記載は以下の通りとなっています。 正しい書き方について調べてみますが、もしお気づきの点があればご指摘いただけると嬉しいです。 ■nuxt.config.js plugins: [ (略) { src: '~/plugins/infiniteloading', ssr: false }, (略) ] ■vueファイル上の記載 <infinite-loading v-if="searchUser" spinner="waveDots" ref="infiniteLoading" @infinite="infiniteScrollForSearchUser" >
MYG

2021/07/19 02:43 編集

失礼しました、動かなくなっていたのはinfinite-loadingではなく、loadingの部分でした。 ■nuxt.config.js loading: { color: '$primary' }, ■vueファイル this.$loading.show();
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問