search

anza-xyz / wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.
https://anza-xyz.github.io/wallet-adapter/
Apache License 2.0
1.55k stars 944 forks source link

Make packages proper ESM with "type": "module" #121

Closed vovacodes closed 2 years ago

vovacodes commented 2 years ago

Is your feature request related to a problem? Please describe. The packages from this repo currently export modules in "loose" ESM format which means you cannot import them into a webpack 5 or nodejs project that uses "native" node ESM module resolution.

Describe the solution you'd like We could solve it by making the files in lib/* proper ESM (add file extensions to imported module specifiers) and add "type": "module" to package.json.

See https://webpack.js.org/guides/ecma-script-modules/ for more details

jordaaash commented 2 years ago

Hmm. What effect does this have on downstream apps or projects that depend on the library? Do they also need to be ESM modules?

We'd need to know whether this breaks compatibility with existing starter projects, projects like dapp-scaffold, etc. but I'm open to the idea, and a PR to evaluate would be welcome.

vovacodes commented 2 years ago

This is indeed a bit of a risky move, so we'd need to test the bundler behavior in a scenario where the package is imported from a "commonjs" setup.

It might require some additional config in the package.json's exports field: https://nodejs.org/api/packages.html#packages_conditional_exports

jordaaash commented 2 years ago

Please let me know what you find out, a PR would help understand the tradeoffs.

jordaaash commented 2 years ago

I've tested out building the library after converting all the relevant packages to ESM: https://github.com/solana-labs/wallet-adapter/pull/132

It seems to work okay, since apps that use this already need to transpiling the modules one way or another and the import/export syntax hasn't changed.

This could be expanded to build ESM and CJS versions if needed, but I'd rather not unless there's an obvious benefit.

Let me know what you think.

jordaaash commented 2 years ago

This has been implemented. All the core and wallet packages are ESM modules. The React, Angular, and Vue UI packages are not, as I ran into issues with these when using sideEffects: false, which was necessary to fix #69.

jordaaash commented 2 years ago

Published: