FROM CACHE - jp_header

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

解決済
RinaA
Shopify Partner
10 1 1

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": "名前"
}

 

 

スクリーンショット 2023-08-15 192904.png

スクリーンショット 2023-08-15 154924.pngスクリーンショット 2023-08-15 155016.png

1 件の受理された解決策
RinaA
Shopify Partner
10 1 1

成功

下記コメントに記載されている内容で解決いたしました!

https://community.shopify.com/c/shopify-apps/theme-app-extension-error-when-testing-the-app/m-p/2192...

 

開発ストアプレビューを「オフ」に設定

npm run build

npm run deploy

元の投稿で解決策を見る

2件の返信2
RinaA
Shopify Partner
10 1 1
@shopify/cli": "^3.48.3"

 CLIを3.48.3にアップグレードしたところ、下記のメッセージが表示される事象については解消しておりました。

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

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

 

しかし、そのほかの問題についてはまだ解決しておりません。

RinaA
Shopify Partner
10 1 1

成功

下記コメントに記載されている内容で解決いたしました!

https://community.shopify.com/c/shopify-apps/theme-app-extension-error-when-testing-the-app/m-p/2192...

 

開発ストアプレビューを「オフ」に設定

npm run build

npm run deploy