Shopify CLI v3でのTheme app extensionsのプレビューがエラーになり起動しない

お世話になります。同じ様な状況になった方。もしくはShopifyのサポートの方にお答えいただけると嬉しいです。

Shopify CLI v3を使って3名のチームで埋め込みアプリとTheme app extensionsを作っています。

shopify app devを実行して、埋め込みアプリの開発環境とTheme app extensionsのプレビュー機能を同時に確認できるかと思いますが、私とチームメンバーの1名についてはそれが実施できません。

埋め込みアプリの開発環境の起動は成功しますが、Theme app extensionsのプレビューの起動時にエラーになります。

以下のようなエラーが表示されます。

━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    command extension:serve:/Users/xxx/Projects/xxxx/xxxx/xxxxx-shopify-app/extensions/xxxxx-extension not found

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

残り1名については以下のように起動します。

┏━━ Pushing theme files to App Ext. Host (xxxxx-xxxxx) (#xxxxxxxxx) on xxxxxxx-dev.myshopify.com
┃                                                                      100%
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (24.69s) ━━
┏━━ Viewing extension… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ Enable your theme app extension:
┃ https://partners.shopify.com/xxxxxx/apps/xxxxxxxx/extensions/theme_app_extension/xxxxxxxxx
┃
┃ Setup your theme app extension in the host theme:
┃ https://xxxxxxxx.myshopify.com/admin/themes/xxxxxxxx/editor
┃
┃ Preview your theme app extension:
┃ http://127.0.0.1:9292
┃
┃ (Use Ctrl-C to stop)
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (0.0s) ━━
15:16:46 Pushed » 'xxxxxxxxx-extension' to a draft

どちらも同じアプリ、ストアを利用していて、ソースも同じです。

この起動できる人と出来ない人の違いを考えてみると、パートナーアカウントの作成時期に1年ほどの差があります。

起動できる人は、2022年11月にアカウントを作成しています。

起動できない私は、2021年10月にアカウントを作成しています。

関係ないかもしれませんが、念の為お伝えします。

また、通常はMacで開発を行っていますが、MacでもWindowsでも同じようにエラーになりました。環境による違いはなさそうです。

以上、現在分かっていることです。

これで何か解決の糸口になりそうな情報お持ちの方いますでしょうか?

よろしくお願いいたします。

Deguchi 様

お世話になっております。

フルバランスの道家と申します。

ご質問確認いたしました。

直接的な回答ができず恐縮ですが、以下URLのRequirementsはご確認済みでしょうか。

https://shopify.dev/apps/online-store/theme-app-extensions/getting-started#requirements

また、1名の方が見れる状況ということで、.envファイルの内容は一緒でしょうか。

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

フルバランス 道家

私も先ほど同様の事象に遭遇しまして、解決できたの共有します。

以下の環境において正常にTheme app extensionsのプレビュー機能が動作することを確認できました。

  • Shopify CLI v3.23.0

まずこちらの問題ですが、Shopify CLI v3で内部的にv2に依存している箇所があり、v2の機能の呼び出し方に不具合があるようです。(ソースを軽く確認しただけなので推測です)

現状の解決策として、

process.env.SHOPIFY_CLI_2_0_DIRECTORY にShopify CLI v2を参照できるパスを指定する
ことで解決できました。

具体的には、

  1. Shopify CLI v2をインストールする (インストール方法は 公式ページ を参照してください)
  2. 上記でインストールしたディレクトリを SHOPIFY_CLI_2_0_DIRECTORY に指定して shopify app dev を実行する
    1でHomebrewを使った場合は、
    [email removed] shopify app dev
    のようにすればOKです。

別の方法として、プロジェクト内にGemfileを用意、shopoify-cliをインストールしてプロジェクトのディレクトリをSHOPIFY_CLI_2_0_DIRECTORYに指定するでも実行できることを確認しています。

この起動できる人と出来ない人の違いを考えてみると、パートナーアカウントの作成時期に1年ほどの差があります。

完全に推測ですが、HomebrewでインストールしたCLIが以前のv2のまま使っている人は上記の対応をしなくても動くのではないかなと思ってます。

(以前の状態のshopify-cliをインストールできないので確認はできてないです)

返信が遅くなり申し訳ございません。

アドバイスありがとうございます。

直接的な回答ができず恐縮ですが、以下URLのRequirementsはご確認済みでしょうか。> > https://shopify.dev/apps/online-store/theme-app-extensions/getting-started#requirements> > - You’ve created a Partner account.> - You’ve created a development store.> - You’ve created an app that uses Shopify CLI 3.0 or higher, or you’ve migrated your existing app so it’s compatible with Shopify CLI 3.0 or higher.> - You’ve populated your store with test products.> - You’ve installed an Online Store 2.0 theme, such as Dawn, that uses JSON templates and supports app blocks.> - You understand the theme app extensions framework.

確認済みです。すべてクリアしてると認識してます。

また、1名の方が見れる状況ということで、.envファイルの内容は一緒でしょうか。

.envファイルは作成していないので今回はそれではなさそうでした。

また何か思いつくものがありましたら、ご教示いただけるとありがたいです。

よろしくお願いいたします。

返信が遅くなり申し訳ございません。

アドバイスありがとうございます。

まずこちらの問題ですが、Shopify CLI v3で内部的にv2に依存している箇所があり、v2の機能の呼び出し方に不具合があるようです。(ソースを軽く確認しただけなので推測です)

そのようですね。v2をキャッシュディレクトリにインストールして利用しようとしているコードは確認しました。

現状の解決策として、> > process.env.SHOPIFY_CLI_2_0_DIRECTORY にShopify CLI v2を参照できるパスを指定する> ことで解決できました。> > 具体的には、> 1. Shopify CLI v2をインストールする (インストール方法は 公式ページ を参照してください)> 1. 上記でインストールしたディレクトリを SHOPIFY_CLI_2_0_DIRECTORY に指定して shopify app dev を実行する> 1でHomebrewを使った場合は、> [email removed] shopify app dev> のようにすればOKです。

この方法を試してみたんですが、私の環境では解決しませんでした。

エラー内容も変わらずでした。

別の環境に依存する何かが影響しているのかもしれないですね…

もし他にも思い当たる何かがあればまたご教示いただけるとありがたいです。

完全に推測ですが、HomebrewでインストールしたCLIが以前のv2のまま使っている人は上記の対応をしなくても動くのではないかなと思ってます。> > (以前の状態のshopify-cliをインストールできないので確認はできてないです)

こちら改めて確認したところHomebrewでShopify CLI v2.25.0がインストールされていたようです。

推測の域を出ませんが、グローバルで利用できるShopify CLIの有無が何か影響しているのかもしれません。

こちらの問題自己解決しました。

以下、解決する為に行ったことです。

  • Homebrew版などのグローバルに入っているshopify-cliを削除する
  • プロジェクトのRubyバージョンとグローバルのRubyバージョンを合わせる
  • グローバルにshopify-cli gemをインストールする
  • node_modulesをすべて削除
  • yarn installから改めてセットアップをする

今回のプロジェクトではShopify App Template - Ruby(https://github.com/Shopify/shopify-app-template-ruby)を使っている(最初の質問時に書き忘れておりました。失礼しました。)ので、プロジェクトのRubyバージョンとグローバルのRubyバージョンをあわせる必要がありましたが、プロジェクトでRubyを使っていない場合はその必要はなさそうです。

アドバイスいただきありがとうございました。

解決されたようでよかったです!

Shopify App Template - Ruby だったのですね。

こちらも確認しておらずすみません。

Shopify App Template - Nodeでも発生していましたが、最新のShopify CLIで修正されたことを確認できましたので、

process.env.SHOPIFY_CLI_2_0_DIRECTORY にShopify CLI v2を参照できるパスを指定する

は現状不要になりました。

今後このスレッドを参照された方のために記載しておきます。