web-monetization-projects
web-monetization-projects copied to clipboard
interledger
Coil OAuth on Nuxt.js: Uncaught TypeError: Cannot read property 'addEventListener' of undefined
I am integrating Coil and web monetization into a Nuxt.js / FastAPI stack. I've been following Coil's documentation from API through to Script.
Last step is to pass the generated btpToken to the OWM script, but that fails with the following error:
coil-oauth-wm.v7.beta.js:formatted:3606 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
at coil-oauth-wm.v7.beta.js:formatted:3606
at Array.forEach (<anonymous>)
at i (coil-oauth-wm.v7.beta.js:formatted:3605)
at Object.<anonymous> (coil-oauth-wm.v7.beta.js:formatted:3616)
at Object.<anonymous> (coil-oauth-wm.v7.beta.js:formatted:3618)
at r (coil-oauth-wm.v7.beta.js:formatted:22)
at Object.<anonymous> (coil-oauth-wm.v7.beta.js:formatted:14210)
at r (coil-oauth-wm.v7.beta.js:formatted:22)
at Object.<anonymous> (coil-oauth-wm.v7.beta.js:formatted:8938)
at Object.<anonymous> (coil-oauth-wm.v7.beta.js:formatted:9254)
Devtools picks it up as being row 3606, here (if that is meaningful):
var n = r(15);
function i() {
["monetizationstart", "monetizationstop", "monetizationpending"].forEach((function(e) {
n.getDoc(document).monetization.addEventListener(e, (function(r) {
t.debug("WM EVENT: ", e, r.detail)
}
))
}
))
}
No matter how I load the script document.monetization remains undefined. And, after that, nothing hanging off it will work. What I’m surprised at is that the script itself seems unable to access itself.
Not sure if this is a Nuxt error, or something obvious and I'm too sleep-deprived to pick it up.
I'd appreciate any guidance. Thanks.
Edited to add:
This minimum html file has all the same issues:
<html>
<head>
<meta name="monetization" content="$wallet.example.com/~alice">
<script>
if (document.monetization) {
document.monetizationExtensionInstalled = true
} else {
document.monetization = document.createElement('div')
document.monetization.state = 'stopped'
}
</script>
<script src="https://cdn.coil.com/coil-oauth-wm.v7.beta.js" defer>
</script>
</head>
<body>
<p>Testing web monetization via coil polyfill using btp token.</p>
<script>
document.coilMonetizationPolyfill.init({ btpToken: 'e0y1...' })
</script>
</body>
</html>
Tested in latest Chrome, Firefox, and Edge.
