snipcart を正しく読み込むのに問題があります。localhost で API キーを取得し、カート内のアイテムの数を表示しますが、netlify にデプロイすると、ページが読み込まれるとカート内のアイテムの数が一時的に表示され、API がキーは正しいですが、エラーが発生します
public API key not found. Attribute data-api-key must be set on #snipcart tag.
私はそれをレンダリングするために反応を使用しており、反応の何かがこれを引き起こしている可能性があるかどうかを確認するために最小限のボイラープレートに落としましたが、私はまだ同じ問題を抱えています.
ファイルに移動 <div hidden id="snipcart" data-api-key={{ API_KEY }}></div>して動作しますが、動作しませんapp.jsindex.html
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href ="https://fonts.googleapis.com/css2?family=Open+Sans&family=Lexend+Zetta&family=Poppins:wght@400;500;700&family=Shadows+Into+Light&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.css" />
</head>
<body>
<div id="root"></div>
<script async src="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key={{ API_KEY }}></div>
<script src="./index.tsx"></script>
</body>
</html>