I am having trouble loading snipcart correctly, it picks up the api key on localhost and shows the number of items in cart however when deployed to netlify, it will briefly flash up the number of items in cart when the page is loaded indicating that the api key is correct however it then comes up with the error
public API key not found. Attribute data-api-key must be set on #snipcart tag.
I am using react to render it, and have taken it down to the minimal boilerplate to see if anything in react could be causing this but I still have the same problem.
moving <div hidden id="snipcart" data-api-key={{ API_KEY }}></div> to app.js file and it works, but in index.html it doesn't work
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>
Putting this in your html doesnt work since the {{API_KEY}} is I assume from your framework. Since the html code is not compiled using your framework, it doesnt do anything with the <div hidden id="snipcart" data-api-key={{ API_KEY }}> tag.
To make this work, put your api key instead of the {{API_KEY}} variable.
Cheers, Lea from Snipcart