Rails 7とVue.js 3を組み合わせた開発では、非同期通信のためにaxiosを利用する場合があります。この記事では、axiosを使用してAPI通信を試みた際に発生したエラーと、その解決方法について説明します。

問題点

Vue.jsコンポーネントでaxiosを使用しようとした際に、次のようなエラーが発生しました。

ViteRuby::MissingEntrypointError in Tasks#index
Showing /path/to/app/views/tasks/index.html.erb where line #8 raised:

Vite Ruby can't find entrypoints/tasks.js in the manifests.

Possible causes:
  - The last build failed. Try running `bin/vite build --clear --mode=development` manually and check for errors.

Errors:
  The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
  x Build failed in 112ms
  error during build:
  Error: [vite]: Rollup failed to resolve import "axios" from "app/javascript/components/DraggableCalendar.vue".
  This is most likely unintended because it can break your application at runtime.

このエラーは、DraggableCalendar.vueでaxiosをインポートしようとしたところ、Viteがaxiosのモジュールを解決できずにビルドに失敗したことを示しています。

解決方法

Step 1: axiosのインストール確認

まず、axiosがプロジェクトに正しくインストールされているかを確認します。ターミナルで次のコマンドを実行し、axiosをインストールします。

npm install axios

Step 2: Viteのビルドを再実行

axiosのインストール後、Viteのビルドプロセスをクリアしてから再実行します。これにより、新たにインストールしたaxiosがビルドプロセスに含まれます。
※このプロセスを飛ばしてもエラー解消することはよくあります。

bin/vite build --clear --mode=development

このコマンドは、ビルドキャッシュをクリアして開発モードでビルドを実行します。これにより、以前のビルドで発生した問題を解消できます。

Step 3: ブラウザのキャッシュをクリア

ビルドが成功した後、ブラウザのキャッシュをクリアしてからページを再読み込みします。これにより、axiosを含む新しいビルドが正しく読み込まれるようになります。
※このプロセスを飛ばしてもエラー解消することはよくあります。

axiosとは？

axiosは、ブラウザやNode.jsで動作するプロミスベースのHTTPクライアントです。REST APIへのGET、POST、PUT、DELETEなどのHTTPリクエストを簡単に行うことができます。プロミスベースであるため、非同期処理を扱う際に.then()や.catch()、async/await構文と組み合わせて使用することができ、非同期通信のコードをシンプルに書くことが可能です。

// GETリクエストの例
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

axiosはその使いやすさから、Vue.jsやReactなどのフロントエンドフレームワークと組み合わせてよく使用されます。

まとめ

Rails 7とVue.js 3の開発において、axiosを使用したAPI通信は強力な機能を提供します。しかし、セットアップ中に問題が発生することがあります。この記事で紹介した手順を通じて、エラーを解決し、非同期通信の実装を進めることができます。