Shopifyアプリ開発で api/ というフォルダを作ってはいけない

Webエンジニアの茄子です。

Webアプリケーションプロジェクト内のフォルダの構成で、フロント側のAPIリクエスト周りの処理をまとめて綺麗にしたいということがあると思います。Shopifyアプリの開発の際、api/というフォルダにまとめようとしたことによって発生したエラーについて紹介します。

環境

Node.js 16.13.0
Shopify CLI v3
( shopify 〇〇 ではなくnpmで操作するようになったバージョンです。 )

エラーの内容

Shopifyアプリの作成・起動方法についてはここでは省略します。公式ドキュメントや他の記事をご覧ください。

npm init @shopify/app@latest で作った初期状態でフロント（React）のコンポーネント等は web/frontend/ に配置されています。ここに api/ というフォルダを追加し、今回は例として getProducts という関数を定義しました。

この状態で components/ProductsCard.jsx からインポートします。

import { Toast } from "@shopify/app-bridge-react";
import { useAppQuery, useAuthenticatedFetch } from "../hooks";
import { getProducts } from "../api/product"; // ←追加

export function ProductsCard() {
  getProducts(); // ←追加
  const emptyToastProps = { content: null };
  const [isLoading, setIsLoading] = useState(true);

するとこのようなエラーが出ます。

解説

提供されているテンプレートでは、認証のためのexpressサーバーが /api/ 以下に割り当てられています。
しかし、Viteの開発サーバーもjsバンドルファイルの配信がルート( / )直下です。そして、他のファイル（のバンドルの中身）のimport元からは /components/some-module.js のように呼び出そうとします（↓画像）。この参照が /api/ フォルダだと /api/request-module.js となり、コンポーネントを読み込もうとするリクエストが認証サーバーに向かってしまいます。そのため、上記のようなエラーが発生します。

対処法

解決方法は、単純ですが api/ という名前を使わないことです。
下の画像のように api-requests/ 等に変更することで防ぐことができます。
Shopifyアプリのテンプレートでは他にこういった衝突はなく、 /api フォルダ以外は大丈夫そうでした。

まとめ

今回は Shopifyアプリ開発のテンプレートの場合を紹介しましたが、他のアプリのテンプレートや、Vite等のツール自体にも予約語のようなものは少なからずあるので、あまりに無関係なエラーが出た場合は可能性の一つとして考えてみてください。