I’ve got a simple HTML element in Bubble.io that I’m trying to run javascript from. I keep getting import errors:
Either it isn’t a module and I can’t use import
Or
It doesn’t recognize exported functions from the packages
Or
It requires absolute reference
Of course, I’ve looked at this : “Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6
and tried using webpack to bundle (https://firebase.google.com/docs/web/module-bundling), but some exported functions weren’t recognized.
Here’s the html:
<!-- ind.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web App</title>
</head>
<body>
<h1>Welcome to My Web App!</h1>
<script type="module" src="https://3b4293b7c2497062d0307b62bd49f75f.cdn.bubble.io/f1720119338907x300714925960672060/screenedIndex.js"></script></body>
</html>
Note that this version of the script is using an incomplete version of the javascript file, because I don’t want to display my API keys and config here, but you can see the structure here by following the link to the bubble hosted js script file: https://3b4293b7c2497062d0307b62bd49f75f.cdn.bubble.io/f1720119338907x300714925960672060/screenedIndex.js
Here’s a fragment of the buildscript on the eval() line where the error shows:
... harmony import */ var firebase_messaging__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! firebase/messaging */ "./node_modules/firebase/messaging/dist/esm/index.esm.js");...
getToken(...)....
index.js:28 Uncaught
ReferenceError: getToken is not defined
at eval (index.js:28:1)
at ./src/index.js (bundle.js:29:1)
at __webpack_require__ (bundle.js:143:41)
at bundle.js:195:37
at bundle.js:197:12
Where the `getToken() function should have been imported by the firebase/messaging import.
Has anyone solved this? How can I run the push notifications script from a bubble page? What’s the trick to getting the imports to work? Input greatly appreciated.