テーマ拡張機能　開発ストアのプレビュー設定について

RinaA · ‎08-15-2023

Shopify公開アプリの開発を進めております。

開発環境で、アプリ内にテーマ拡張機能を追加し、アプリブロックをテーマ編集画面から追加できるよう対応を行っているのですが、

テーマ編集画面上でアプリブロックを追加しようとすると「アプリブロックが見つかりません」と表示されアプリブロックをテーマに追加することができません。

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

開発環境でテーマ拡張機能の確認を行うには、「開発ストアプレビュー」設定をオンにする必要があるかと存じますが、

パートナー管理画面＞該当アプリ＞拡張機能　の画面では、

「開発ストアプレビュー」の設定はオンになっております。

（画面上の最終更新日時が、最新バージョンの日時に更新されていないのがやや気になりますが、、）

しかし、　パートナー管理画面＞該当アプリ＞バージョン＞最新バージョン

を選択すると、「アクティブなアプリのバージョンは、開発ストアで提供されていません」と表示されてしまいます。

また、「npm run dev」コマンドを実行した際も下記のメッセージが表示されるため、

「To preview your extensions, make sure that development store preview is enabled in the Partner Dashboard」

「開発ストアプレビュー」設定が実際は反映されていないのだと思います。

同事象について何か解決方法をご存じの方がいらっしゃいましたらご教授いただけますと幸いです。

◎状況

・下記の通りの手順でテーマ拡張機能を追加しました。

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

・「npm run deploy」を実行し、テーマチェックではエラーは発生しておりません。

・最近Remixを使用してアプリを作成いたしました。

　以前Remixを使用せずアプリを作成した際は、開発環境で問題なくアプリブロックを追加することが出来ました。

・package.json

{
  "name": "アプリ名",
  "private": true,
  "scripts": {
    "build": "NODE_ENV=production remix build",
    "predev": "prisma generate && prisma migrate deploy",
    "dev": "shopify app dev",
    "config:link": "shopify app config link",
    "config:push": "shopify app config push",
    "generate": "shopify app generate",
    "deploy": "shopify app deploy",
    "config:use": "shopify app config use",
    "env": "shopify app env",
    "start": "remix-serve build",
    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
    "shopify": "shopify",
    "prisma": "prisma",
    "setup": "prisma generate && prisma migrate deploy"
  },
  "dependencies": {
    "@prisma/client": "^4.13.0",
    "@remix-run/node": "^1.19.1",
    "@remix-run/react": "^1.19.1",
    "@remix-run/serve": "^1.19.1",
    "@shopify/app": "^3.48.1",
    "@shopify/app-bridge-types": "^0.0.2",
    "@shopify/cli": "^3.48.1",
    "@shopify/polaris": "^11.1.2",
    "@shopify/polaris-icons": "^7.7.0",
    "@shopify/react-form": "^2.5.5",
    "@shopify/shopify-app-remix": "^1.0.3",
    "@shopify/shopify-app-session-storage-prisma": "^1.0.0",
    "cross-env": "^7.0.3",
    "isbot": "latest",
    "qrcode": "^1.5.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tiny-invariant": "^1.3.1"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.19.1",
    "@remix-run/eslint-config": "^1.19.1",
    "@types/eslint": "^8.40.0",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^8.8.0",
    "prettier": "^2.8.8",
    "prisma": "^4.13.0"
  },
  "workspaces": [
    "web",
    "web/frontend",
    "extensions/*"
  ],
  "author": "名前"
}