CODEWITHSUNDEEP
javascripthtmlfirebasewebpackbubble.io
Ethan Leonard
Ethan Leonard

Reputation: 245

Run JS from bubble (import failing)

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.

Upvotes: 1

Views: 28

Answers (0)

Related Questions