Ethers and Rollup

[samsends]

Hello,

I am struggling to get ethers.js to work with rollup.

The specific error that I am encountering in browser is:

Uncaught SyntaxError: The requested module './../../../bn.js/lib/bn.js' does not provide an export named 'default'

Here is a repo to reproduce the error: https://github.com/GradientCap/Graph

Rollup config: https://github.com/GradientCap/Graph/blob/main/rollup.config.js

I've tried setting mainfields and using the commonjs plugin configuration from the ethers repo to no avail.

Any help would be appreciated.

[ricmoo]

Can you try dropping the "browser" from your mainFields?

[samsends]

@ricmoo Hey I tried dropping browser to no avail. Have you seen anything like this before?

[ricmoo]

I have seen it before, but haven’t in a while.

What version of rollup.js and version of ethers are you using?

If you are using an older rollup, you maybe need to pass in an exports key to the commonjs plug-in?

[samsends]

Using the latest version of rollup. I'm new to JS / rollup where do you think I should start to debug this?

[samsends]

I've tried using some of the rollup configs in the repo which didn't work

[veikkoeeva]

I thought to add that I see this same error. Project (currently) at https://github.com/veikkoeeva/erc1155sample/ and a few ways of seeing it are running npm run test or npm run start (in console log).

At least my case may be because bn.js seem to be a UMD module whereas Rollupjs by default tries to export ES modules. I wonder if there's something about the TS types over bn.js or something in the https://open-wc.org/guides/ basic set-up. I need to dig a bit deeper to be sure, though.

Here is also a screenshot of one variation of the issue

EDIT: I went over to SO ask too, at https://stackoverflow.com/questions/67728084/transforming-umd-modules-to-es-modules-in-rollupjs-the-requested-module-x-does.

EDIT 2: Made further progress that may help solving this manually by patching files in node_modules. I'm a bit puzzled though why doesn't Rollup do this already as I think it could. So posted another question at SO, I provide it here just in case: https://stackoverflow.com/questions/67754327/automating-umd-export-to-esm-import-in-rollups.

There seem to be a similar case in Rollup repo at rollup/rollup#3994.

[veikkoeeva]

I'll add here that I did just a quick experiment by going to node_modules and bn.js package where I patched package.config to have "module": "lib/bn.esm.js", created a file with that name and copy-pasted the contents of bn.js to there and echanged the module export to export default { BN } and it compiled. Another idea could something like import BN from "bn.js"; -> import * as _BN from "bn.js"; and doing it to all modules that import like that, but it wouldn't work on runtime.

There's more links in the SO thread, but it looks to me RollupJS checks module field and due to recent changed it may be @rollup/plugin-commonjs does not catch the CJS module exports in the files and so consequently they are not transpiled to ESM ones in expeced format.

I am not sure how laborious would it be to turn the file into ES modules locally and add default exports, but maybe I try later next week. Looking quickly at packages, most are maintained by @ricmoo already or have a TS/Rollup builds that just do not provide ES builds yet. :) (As an aside, it appears to be web advocates from communities like lit.dev, open-wc etc. note to provide ES6 builds with modern code and let users to transpile if they need specific polyfills etc.)

[veikkoeeva]

Maybe related development in TS compiler: microsoft/TypeScript#44501.

[N00bBot]

I'm having this exact issue as well, did anyone ever come to a solution that doesnt require manual changes to the package?

[veikkoeeva]

Maybe useful to know #2203 (comment) .