using ES module NPM package

[narasimhajupally]

I am getting an error when I try to use the npm package of type: "module". the package name is execa.

require() of ES Module /home/j-_-j/Desktop/eligere/repos/desktop-recorder-app/node_modules/execa/index.js from /home/j-_-j/Desktop/eligere/repos/desktop-recorder-app/app/background.js not supported.

how to fix this ? should I change webpack configuration?

Thanks.

[alexis-piquet]

Hey @narasimhajupally, Could you give me more context of your use case ? Have you tried to use it in the main or render process?

[narasimhajupally]

I was using the package in the main process which was getting compiled to background.js. the package(execa) is a pure ESM package so in background.js require syntax was being used, therefore the error. Temporarily I had downgraded the version of execa (to the one before it became pure ESM) which works. https://www.npmjs.com/package/execa

[pixelass]

Any news here.

This has led to us having to drop a lot of Sindreshohus' packages, which are mostly pure ESM.

pretty much a showstopper.

What needs to be done here? How can we contribute to fix this?

[bm777]

How big is your ES module? @pixelass

Workaround: you can import it as a class, or function inside the main/ so that you can use it in main/background.js or in the pages/api/ so that you can use it in your pages.

I did that with ollama-js, I rewrote the module, and have put all functions I need inside the pages/api folder -> so that I can call it in my pages {useeffect}

But if the module is too big and difficult to just extract the function you want, I have no solution for you. (at the end, instead of using the whole module, Is better to extract what you need.)

[pixelass]

@bm777 Sorry but AFAIK pages/api does not work in production due to export.

Anyways whenever I import execa, camelcase or other ESM modules I get an error from background.js and it seems that there is no way to fix it ATM. But thanks anyways. Every idea is welcome.

Our current approach is either use native alternatives (child process instead of execa) or boldly copy code into our source (🤮)

https://github.com/blib-la/captain/blob/060df231dcf345ef7f0f7f60115e932405c12483/main/helpers/utils.ts#L66-L85

[bm777]

@pixelass when I said pages/api, I was talking about pages/api/method.js and includes class and function in it. It works in dev and prod without issue.

I understand, just copying is sometimes copying garbage in our code.