api
api copied to clipboard
polkadot-js
Failed to resolve module specifier ["util", "websocket", "crypto"] with @polkadot/api
Hello,
I'm trying to build simple SPA with rollup using polkadot API "@polkadot/api": "^9.0.1" however having some difficulties with
underlying packages:
- util
- websocket
- crypto
E.g.
Uncaught TypeError: Failed to resolve module specifier "util". Relative references must start with either "/", "./", or "../".
If i inspect final bundle.js i can see these 3 are being loaded as modules which is the problem.
import e from "util";
import t from "crypto";
import n from "websocket";
.
.
.
Do you have any idea how to tell rollup to treat them as packages / externals ?
See my rollup config here: https://github.com/galacticcouncil/api-docs/blob/master/rollup.config.js
Can be easily build with npm run build
You can check the specific api & common rollup configs which doesn't have this issue since it uses specific entry points and ensures it pulls in the browser deps (warning: these are very opinionated with helpers from @polkadot/dev to ensure that consistency is followed in all repos, so you would need to follow that trail) -
https://github.com/polkadot-js/api/blob/master/rollup.config.mjs https://github.com/polkadot-js/common/blob/master/rollup.config.mjs
Which builds bundles to here -
https://github.com/polkadot-js/build-bundle
So best I can do is point you to the configs that work - over and above that nothing I can do, not a rollup expert so cannot help you debug or even look at what you have done. (It is out of the scope for the libs, cannot control build environments for others)
TL;DR Pre-built bundles are supplied (both as part of the npm package and the linked repo), for own rollup builds I suggest looking at the linked configs and working from there
@jacogr Thank you Jaco. Saved me a lot of time with builds.
Bundles did the job.
<body>
<div id="app"></div>
<script src="https://unpkg.com/@polkadot/util/bundle-polkadot-util.js"></script>
<script src="https://unpkg.com/@polkadot/util-crypto/bundle-polkadot-util-crypto.js"></script>
<script src="https://unpkg.com/@polkadot/keyring/bundle-polkadot-keyring.js"></script>
<script src="https://unpkg.com/@polkadot/types/bundle-polkadot-types.js"></script>
<script src="https://unpkg.com/@polkadot/api/bundle-polkadot-api.js"></script>
<script type="module" src="./out/index.js"></script>
</body>
Then one can easily use in {{name}}.ts something like this:
//@ts-ignore
const {ApiPromise, WsProvider} = window.polkadotApi;
Not big fan of global scope e.g. window/globalThis, but at least working with minimal effort with lit/web-components :)
This issue has been open for 21 days with no activity and is not labelled as an enhancement. It will be closed in 7 days.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue if you think you have a related problem or query.