現在、Shopify アプリ開発の準備として、チュートリアルアプリをHeroku上で動作させようとしております。
ngrokで試したときはうまく動いたのですが、herokuでデプロイすると動かなくなりました。
よろしければ、ご助言いただければ幸いです。
【チュートリアルアプリ】
https://shopify.dev/apps/getting-started/create
を、ページに記載の通りに実装しました。
【行ったこと】
-
Herokuでnodejsアプリを作成
-
heroku GITでアプリをデプロイ
-
herokuのConfig Varを入力
HOST = アプリURL
SCOPES = read_products,write_products
SHOP = shopname.myshopify.com
SHOPIFY_API_KEY = APIキー
SHOPIFY_API_SECRET = SECRETキー
4.Shopify partnerのダッシュボードのアプリ設定のURLを変更
アプリURL : アプリURL
ダイレクトURLの許可: アプリURL/auth/callback
5.4まででインストールまではできましたが、アプリ画面にherokuエラーが表示されたため、herokuのログを見ながら下記のようにコードを変更しました。
・package.jsonに、“start”: "node ./web/index.js"を追加
(herokuログに、startがないことでエラーが表示されていたため)
・web/index.jsの、"const PROD_INDEX_PATH = ${process.cwd()}/dist/;"を、
"const PROD_INDEX_PATH=${process.cwd()}/web/frontend/;に変更
(herokuログにファイルがないと指摘されたため、アプリ画面に表示するべきと思われるweb/frontend/index.htmlを開かせようと思ったため)"
【現在の状態】
添付のように、画面に何も表示されない
ブラウザのコンソールに下記のエラー
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/jsx”. Strict MIME type checking is enforced for module scripts per HTML spec.
heroku側のログにはエラー表示なし
【現在の状態の推測】
web/frontend/index.htmlの、31行目 でエラーが発生しています。
これは、moduleがjavascriptを読み込むtypeなのに、jsではなくjsxを読み込もうとしているためだと思います。
それならばと、type="text/babel"に変更してみたところ、index.jsxの1行目のimportがmodule内でないと使えないようで、エラーが発生します。
さらにならばと、index.jsxの拡張子を.jsに変更し、にしてみたところ、" Uncaught TypeError: Failed to resolve module specifier “react-dom”. Relative references must start with either “/”, “./”, or “../”. "というエラーが発生し、やはり動きません。
import ReactDOM from “react-dom”;
のimport文の使い方がよくないみたいです。しかし種々の情報を見てみると、皆さんはこのような書き方で動いているようで、私の環境に何か致命的な抜けがあるのではと思い投稿させていただいております。(ngrokでは動いておりましたし…)
何かインストールしなければならないものが抜けているのか、どのようにすれば動くようになりそうか、ご指摘がありましたらいただけると助かります。
よろしくお願いします。
