Can't use ES Modules in a plugin

Hello, Im trying to use a dependency in my plugin, the problem is that the imports inside the module causes issues running it in Inkdrop,

 /Applications/Inkdro…g/src/common.js:113 app:error 
/Users/raizo/Documents/desmos/node_modules/desmos-react/index.js:12 
import { jsx as _jsx } from "react/jsx-runtime"; 
^^^^^^ 
SyntaxError: Cannot use import statement outside a module

Hi Loron,

Thanks for the report.
ES Modules are not supported yet in Electron. You have to transpile those modules with Rollup or something.

1 Like

Can you give me some more details on this? Im trying to kinda hack this together
since I barely have any knowledge of JavaScript.

What you’re trying to use is the ES6 import syntax I think the easiest way to solve the issues is simply using the CommonJS require syntax which is supported by node.js, and also plugins since they are essentially just node.js packages. It may be worth to have a look at node.js documentation for packages.

1 Like

im not using imports myself but the dependency, ive used rollup to convert it to commonjs now but now that spits out that it cant find Desmos so I’m looking to use another approach at this :confused:

Oh, my bad. Can’t help with that unfortunately, I always end up getting lost in JS package bundling and often just try different stuff until something works.

Yeah now it seems to be an error related to demos-react itself where i try to use it before the script tag loads it even tho I append it to the document in useEffect… really weird

desmos-react exports only in ES modules. You can’t use it directly in Electron. You have to convert it to CommonJS somehow.
You can report that to the desmos-react author and ask him to include cjs(CommonJS) in the package.

1 Like

No worries, I have converted it with rollup which seems to work fine actually

1 Like

Great to hear that!