JSS Next.jsアプリのトラブルシューティング
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSSアプリケーションのデバッグを助けるために、JSSが提供するデバッグログユーティリティの使用をお勧めします。
以下の手順を行うことでほとんどのエラーを防ぐことができます:
-
アプリで使用されるすべての環境変数に値があるか確認してください。サンプルアプリは以下の順序で環境変数を検索します:
- scjssconfig.json.
- .env.
- .env.local (局所環境のみ)
-
複数のファイルに同じ変数の定義が含まれている場合、アプリケーションは最後に見つけた値を使用します。
変数名や記述については サンプル .envファイルを ご参照ください。
-
APIキーの設定が正しくできているか確認してください。
-
プロジェクトのサイト定義とアプリの定義がSitecore設定で正しいか確認してください。必要なプロパティのリストは サンプルアプリ設定 を参照してください。
-
JSS編集シークレットを設定しているか確認してください。Next.jsアプリで使うJSS_EDITING_SECRET値は、Sitecoreインスタンスで使われている値と一致しなければなりません。
-
GraphQLエンドポイントがpackage.jsonとアプリのSitecore定義で正しいか確認してください。ブラウザでGraphiQLインターフェースを開き、設定(<sitecore hostname + graphQL endpoint>/ui?sc_apikey=
)の値を使ってエンドポイントが動作しているか確認してください。
サーバーサイドのJavaScriptエラー
npm installまたはbuildステップ中に予期せぬJavaScriptエラー、特に他のチームメンバーが再現できないエラーに遭遇した場合は、使用されているNodeとnpmのバージョンを確認してください。ターミナルから実行してください:
node -v npm -v
私たちはJSSを長期 サポート(LTS)バージョンのNodeでテストしています。これらは通常、最新の公式Nodeバージョンより1つ大きな遅れです。
CI/本番環境で使用されるNode/npmバージョンは、ローカル環境で使われているバージョンと異なる場合があります。プロジェクト構成が特定のNode/npmバージョンを必要としない場合、package.json展開エージェントは通常、利用可能な最新のバージョンか環境固有の「デフォルト」バージョンでビルドします。
テストのためにローカル環境で複数のNodeバージョンを切り替える必要がある場合は、nやnvmのようなサードパーティ製パッケージを使うことができます。
SSL証明書に関するエラー
プライベート署名証明書を使ってローカルのSitecoreインスタンスを扱っている場合、以下のエラーが発生する可能性があります。
エラー
エラー
LEAF確認TOできませんUnauthorizedError
このエラーを解決するには、Node.js用のSitecore CA証明書を設定してください。
JSSアプリをローカルにデプロイする際のエラー
インポートロールに正しい権限がない場合、以下のエラーが発生する可能性があります:
IMPORT ERROR(S) OCCURRED! Exception thrown while importing JSS app Exception: Sitecore.Exceptions.AccessDeniedException Message: AddFromTemplate - Add access required
解決策については「 AzureでJSSアプリケーションをインポートする際のエラー 」を参照してください。
データ取得の問題
JSS Next.jsアプリの構築とレンダリングは、GraphQLを使ってデータを取得することに依存しています。ビルド失敗やページをレンダリングできないアプリの最も一般的な原因は、データ取得プロセスの問題です。
<sitecore hostname + graphQL endpoint>/ui?sc_apikey=
静的生成機能をサポートするために、サンプルアプリはGraphQLクエリを使ってSitecoreパスを取得しています。このクエリを直接GraphiQLで実行してみてください。
# YOUR_PATH should be the ID of your site root (home page) in lower-case, with dashes removed.
YOUR_LANGUAGE should be your default language, as defined in package.json
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
query{ search(where: { AND: { name:"_path", value:"YOUR_PATH" }, { name:"_language", value:"YOUR_LANGUAGE" }, { name:"_hasLayout", value :"true" }
}) { total results { url { path } } }" }
期待された結果が見られない場合は、以下のステップを試してください。
- Sitecoreコントロールパネルで「Populate Solr Managed schema」を使ってSolrスキーマを入力してください。
- Sitecoreコントロールパネルでインデックスマネージャーを使ってインデックスを再構築してください。
- あなたのコンテンツに、問い合わせたい言語のバージョンがあるか確認してください。
GraphiQLは空欄で、開発者ツールには「エラー failed to advanced stream」と表示されます。
アプリケーションがlocalStorageのデータを復元できない場合にこの問題に直面することがあります。例えば、埋め込みクエリが入ったURLを開こうとしてクエリが無効だった場合などです。
問題を解決するために:
-
関連するタブからすべてのローカルストレージをクリアしてください。
-
Chromeのタスクマネージャーで、ローカルストレージに再度書き込みされる前にプロセスを終了してください。
GraphiQLのエラー「XmlException: Root element is missing」
このエラーは、Sitecoreにログインした同じブラウザでGraphiQLを起動したときに発生します。
問題を解決するには、URLクエリパラメータにsc_mode=normalを追加します。
Sitecoreでアイテムを編集しようとしたときのエラー
Sitecore Editor Roleで新しいユーザーを作成した後、SitecoreでJSSアプリの項目を編集しようとすると、そのユーザーに読み取り権限がないと警告されることがあります。
回避策として、System/Workflows/JSS開発ワークフロー項目のWorkflow State Writeを手動で設定し、最終的な「公開済み」状態を編集可能にします。これにより、ユーザーは「ロック&編集」オプションを使って新しいバージョンのアイテムを作成できます。
エクスペリエンスエディターでのホストタイムアウトのレンダリング問題
Experience Editorを使ってHTTPレンダリングエンジン(Next.jsアプリなど)を使うように設定されたJSSアプリを初めて開くと、レンダリングホストからタイムアウトエラーが表示され、メッセージThe operation has timed outが出ることがあります。ログには以下の内容が見られるかもしれません:
10292 `10
` ERROR JSS Error occurred during POST to remote rendering host: `http://localhost:3000/api/editing/render\` 10292 `10` ERROR The operation has timed out Exception: System.Net.WebException Message: The operation has timed out Source: System at System.Net.WebClient.UploadDataInternal(Uri address, String method, Byte data, WebRequest& request) at System.Net.WebClient.UploadString(Uri address, String method, String data) at Sitecore.JavaScriptServices.ViewEngine.Http.RenderEngine.InvokeT(String moduleName, String functionName, Object functionArgs)問題を解決するには、\App_Config\Sitecore\JavaScriptServices\Sitecore.JavaScriptServices.ViewEngine.Http.configファイルを編集してRequestTimeoutMs設定の値を上げてください。例えば:
GraphQLクエリエラーは、SXAを搭載したSitecoreインスタンスを使ってNext.jsアプリを起動しようとします
JSSテナントとSXA連携を持ち、Next.jsアイテムをJSSテナントにデプロイする場合、Next.jsアプリを本番モードで起動しようとした際にGraphQLクエリエラーが発生することがあります。
Error: Valid value for rootItemId not provided and failed to auto-resolve app root item.
このエラーは、Next.jsアプリとNext.js JSSテナントにデプロイされたアプリアイテムが異なるテンプレートを参照しているため、クエリが失敗するため発生します。
エラーを防ぐために、GraphQLサービスのインスタンスに対するrootItemIdを次のように定義してください。
- /src/lib/sitemap-fetcher.ts.
- /src/lib/dictionary-service-factory.ts.
GraphQL内省データ生成時の誤差
GraphQLスキーマが変更された場合、GraphQLの内省データを再生成しなければなりません。
サンプルアプリでは、コマンドjss graphql
。!注このコマンドで内部的に呼び出すスクリプトは、scjssconfig.jsonファイルが埋められている必要があります。ファイルを生成するには、JSSアプリをSitecoreに接続する必要があります。
VercelはローカルのSitecore環境からのデータを表示できません
ngrokを使ってローカルSitecoreエンドポイントをVercelに公開する場合は、host-headerフラグを使用していることを確認してください。例えば、
ngrok http -host-header=rewrite
18.0.0アップグレード後、Vercelでアプリがレンダリングに失敗します
もしアプリがローカル開発環境で正しくレンダリング・ビルドされるのに、Vercelにデプロイした際にレンダリングができない場合、問題の原因としてバージョン18.0.0以降への誤ったアップグレードが原因かもしれません。
jss createコマンドでNext.jsアプリケーションを作成する際、選択したオプションや--fetchWith・--prerenderオプションのデフォルト値に基づいてスクリプトが自動的に整理されます。
Next.jsアプリケーションをJSS 16.0からJSS 18.0に手動でアップグレードし、リポジトリから最新のコードをコピーする際には、この自動クリーンアップは行われません。バージョン18.0以前は、...path.SSR.tsx src/pages_examples/に配置されていました。バージョン18.0.0以降では、jss createコマンドの改良により、Next.jsサンプルアプリケーションのソースはsrc/pagesの...pathパラメータのキャッチオール動的ルートの両方を保持しています。
レンダリングの問題を解決するために:
- 正しいページソースファイルを選択し、キャッチオールの動的ルートを1つだけにしてください src/pages
- サーバー側レンダリングを使う場合は、 src/path/...path.SSR.tsx を保持して名前を変更してください ...path.tsx
- 静的生成を使う場合は src/path/...path.SSR.tsxを削除してください。
- ソースコードを再デプロイしてください。
既知の問題
空のテキストフィールドを入力すると、以下のエラーメッセージが表示されます:
Uncaught TypeError: Cannot read property 'baseNode' of undefined
これはExperience Editorで既知の問題であり、今後のリリースで修正される予定です。機能には影響せず、安全に無視しても構いません。
開発モードでNext.jsを実行すると、Next.jsはランタイムエラーをオーバーレイで表示します。
この問題はNext.jsが本番モードで動作している場合には発生せず、コンテンツオーサーには影響しません。