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

[supernaturally]

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"
}
}

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";

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)

[Kayami]

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 → https://www.npmjs.com/package/fix-esm

use it like this

make sure you add fix-esm to your dependencies

[supernaturally]

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.

[Kayami]

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

[supernaturally]

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

UPDATE - ESM is still not supported.

[redvivi]

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

[supernaturally]

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.