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) .

[syffs]

I'm having a similar issue:

[!] Error: 'default' is not exported by node_modules/js-sha3/src/sha3.js, imported by node_modules/@ethersproject/keccak256/lib.esm/index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/@ethersproject/keccak256/lib.esm/index.js (2:7)
1: "use strict";
2: import sha3 from "js-sha3";
          ^
3: import { arrayify } from "@ethersproject/bytes";
4: export function keccak256(data) {
Error: 'default' is not exported by node_modules/js-sha3/src/sha3.js, imported by node_modules/@ethersproject/keccak256/lib.esm/index.js
    at error (node_modules/rollup/dist/shared/rollup.js:158:30)
    at Module.error (node_modules/rollup/dist/shared/rollup.js:12423:16)
    at Module.traceVariable (node_modules/rollup/dist/shared/rollup.js:12808:29)
    at ModuleScope.findVariable (node_modules/rollup/dist/shared/rollup.js:11588:39)
    at FunctionScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6953:38)
    at ChildScope.findVariable (node_modules/rollup/dist/shared/rollup.js:6953:38)
    at MemberExpression.bind (node_modules/rollup/dist/shared/rollup.js:9181:49)
    at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:5076:23)
    at CallExpression.bind (node_modules/rollup/dist/shared/rollup.js:9425:15)
    at BinaryExpression.bind (node_modules/rollup/dist/shared/rollup.js:5076:23)

@veikkoeeva @samsends did you find any workaround ?

@ricmoo I tried a bunch of ideas I found out there without any luck, like

• mainFields: [ "module", "browser", "main" ] instead of browser: true
• playing with @rollup/plugin-commonjs nameExports is not referenced as an option anymore but still in the doc rollup/rollup#4342
  If i understand well, v6 is expected to fix this ?

[AryanTiwari6]

I'm having this exact issue as well, did you find a solution yet?

Got it! link for future reference: FredKSchott/rollup-plugin-polyfill-node#38 (comment)

Thank you so much!

[veikkoeeva]

@syffs Only the one I noted in Vite issue forums to set up a patch-package to automate the quick fix I did manually and apply it to all these problems. It may be someone has done it already.

It may be possible to refactor bn.js so Rollup understands to transform it to ESM or refactor it to support ESM altogether.

I indeed read from discussion that version 6 would fix this issue one way or another. I do not know if there is a plan to gather around people to test and/or help to expedite version 6 release to fix this.

<edit: One option is probably also compile and import ethers related parts as "umd" module using Rollup. With a very quick five seconds search engine something like https://remarkablemark.org/blog/2019/07/12/rollup-commonjs-umd/, i.e. a separate entry to generate an Etherjs bundle and then importing it with something like https://stackoverflow.com/questions/51461723/import-umd-javascript-modules-into-browser. In fact I may try to do that within a month if no one else does (just so busy atm :D).

[ricmoo]

Once the beta of v6 is out, I would love wools to experiment with various bundlers. I personally only use rollup (you can check out the various rollup configs in the project for some ideas if you are having problems) and webpack as part of the ReactNative tests.

[xpluscal]

How did you get ethers to work with rollup?
I’m building with sveltekit aka vite using rollup.

[xpluscal]

Are there any other known workarounds around this issue aka building ethers through rollup?

[lucashenning]

Same here, has anyone been able to make this work?

[!] Error: 'default' is not exported by node_modules/bn.js/lib/bn.js, imported by node_modules/@ethersproject/bignumber/lib.esm/bignumber.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/@ethersproject/bignumber/lib.esm/bignumber.js (9:7)
 7:  *
 8:  */
 9: import _BN from "bn.js";
           ^
10: var BN = _BN.BN;
11: import { hexlify, isBytes, isHexString } from "@ethersproject/bytes";

[hardyjosh]

I'm using Svelte+Vite and somehow got it working (for now...)

My vite.config.ts:

import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
    optimizeDeps: {
      include: [
        'bn.js',
        'js-sha3',
        'hash.js',
        'aes-js',
        'scrypt-js',
        'bech32'
      ]
    },
  plugins: [svelte()]
})```