Importing modules - "This code cannot be interpreted as javascript..."

Plugin builders
1

When creating a plugin action and enabling “node modules”, I’ve added a few npm modules via a custom package.json:
{
"dependencies": {
"module1.js": "*",
"node": "10.16.3",
"module2": "2.0.11"
}
}
deploymentuptodate

Bubble successfully declares “Deployment package is up to date” after inserting the custom package.json, but when I import module2 into the first Action Code function, the Bubble plugin editor throws the error “This code cannot be interpreted as javascript…”

No errors when defining a const based on module1.js:
const module1 = require("module1.js");

As soon as module2 is imported via import, the editor throws the error:
import {module2} from "module2";

error
error1200×27 5.47 KB

When the line is commented out, the error goes away. Any ideas on importing module2 into the action code? (module2 is technically a .ts npm vs. module1.js)

2

import is not supported by bubble, i’m guessing its because they’re using an old version of node.

you have two options

  • look for a cjs version of the module
  • use this package, require it first and then import your module via require syntax → fix-esm - npm

use it like this

Screenshot 2022-10-12 at 22.27.55
Screenshot 2022-10-12 at 22.27.55744×164 19.9 KB

make sure you add fix-esm to your dependencies

Screenshot 2022-10-12 at 22.28.12

1 Like
3

Thanks for the fast response @Kayami. Turns out module2 doesn’t need the fix-esm npm, but using require (vs. import) did the trick:

// Doesn't work --> import {module2} from "module2";
// this works:
const { module2 } = require('module2');

Very strange. Like you said, it may be the older version of Node that Bubble is using to support plugins. Enabling fix-esm also worked, but added a significant amount of processing time to my application. It’s good to know the package exists to fix ESM import errors though.

3 Likes
4

right, that means that the package you’re using supports cjs, but a lot of newer packages are ESM only so there is no other (reliable) way to do it without fix-esm.

there is one more approach i’ve tried but that only seemed to work 50% of the time so it was useless, and that is using a dynamic import to use the import syntax at runtime → import - JavaScript | MDN

in general bubble hasn’t really done anything to improve this powerful feature of the plugin builder so i’m not expecting it to change any time soon

5

Just received the email from Bubble that they are updating plugins’ runtime env to Node 14 since AWS will be removing support for node 12 on November 14, 2022. Sometimes, the universe provides :slight_smile:

UPDATE - ESM is still not supported.

6

@supernaturally Unfortunately native ESM won’t be supported still, as it requires more than Node upgrade on Bubble’s side to work.

7

Whoops, jumped the gun. Thanks for pointing that out @redvivi Looks like the workaround I mentioned or the fix-esm package that @Kayami linked is still required.

8

If my dependency is only supported with Node.js 16, 18, and 19 does this mean it will not work in Bubble? I think I read earlier in the thread Bubble only supports Node 14? Is that accurate or have I misdunderstood (still a bit of a plugin beginner)

Thankyou!

9

Yeah, Bubble SSAs execute in a Node 14 environment at the moment. If your plugin is a custom one and you’re not making a plugin for the marketplace you could consider just executing it as a Google Cloud Function with minor changes (or in your SSA, ping a cloud function and return the value(s).

2 Likes
10

thanks for the reply.

yes its a custom one for myself.

i didnt know about google cloud function but will check it out.

Thankyou!

Edit: There is not much around on how to connect Bubble and GCP except for this excellent video by the @wisebubbler. Got my functions firing thanks to this!

1 Like