Skip to content

Commit af64f84

Browse files
authored
docs: add Node.js polyfills setup instructions for Vite and Webpack [LIVE-19144] (#465)
1 parent 13d8e45 commit af64f84

2 files changed

Lines changed: 110 additions & 0 deletions

File tree

apps/docs/pages/docs/discover/wallet-api/core/getting-started.mdx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,61 @@ You can use your favorite package manager, to install the `@ledgerhq/wallet-api-
1616
npm install @ledgerhq/wallet-api-client
1717
```
1818

19+
## Node.js Polyfills Setup
20+
21+
### Why do you need polyfills?
22+
23+
Modern bundlers like Vite and Webpack 5+ no longer include Node.js polyfills by default. Since Ledger's Wallet API uses Node.js modules like `Buffer` for cryptographic operations, you'll need to add these polyfills manually when building for the browser.
24+
25+
### Setting up with Vite
26+
27+
If you're using Vite, install the `vite-plugin-node-polyfills` plugin:
28+
29+
```sh npm2yarn
30+
npm install --save-dev vite-plugin-node-polyfills
31+
```
32+
33+
Then add it to your `vite.config.js` or `vite.config.ts`:
34+
35+
```js
36+
import { defineConfig } from "vite";
37+
import { nodePolyfills } from "vite-plugin-node-polyfills";
38+
39+
export default defineConfig({
40+
plugins: [
41+
nodePolyfills({
42+
// Whether to polyfill `node:` protocol imports.
43+
protocolImports: true,
44+
}),
45+
],
46+
});
47+
```
48+
49+
### Setting up with Webpack 5+
50+
51+
For Webpack 5+, you can add polyfills to your `webpack.config.js`:
52+
53+
```js
54+
module.exports = {
55+
resolve: {
56+
fallback: {
57+
buffer: require.resolve("buffer"),
58+
},
59+
},
60+
plugins: [
61+
new webpack.ProvidePlugin({
62+
Buffer: ["buffer", "Buffer"],
63+
}),
64+
],
65+
};
66+
```
67+
68+
You'll also need to install the polyfill package:
69+
70+
```sh npm2yarn
71+
npm install buffer
72+
```
73+
1974
---
2075

2176
Now that you've successfully installed the necessary packages, you're ready to start crafting with Ledger's Wallet

apps/docs/pages/docs/discover/wallet-api/react/getting-started.mdx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,61 @@ npm install @ledgerhq/wallet-api-simulator
3939
Remember, this package currently only functions with server-side applications due to a dependency requiring the usage
4040
of `process`.
4141

42+
## Node.js Polyfills Setup
43+
44+
### Why do you need polyfills?
45+
46+
Modern bundlers like Vite and Webpack 5+ no longer include Node.js polyfills by default. Since Ledger's Wallet API uses Node.js modules like `Buffer` for cryptographic operations, you'll need to add these polyfills manually when building for the browser.
47+
48+
### Setting up with Vite
49+
50+
If you're using Vite, install the `vite-plugin-node-polyfills` plugin:
51+
52+
```sh npm2yarn
53+
npm install --save-dev vite-plugin-node-polyfills
54+
```
55+
56+
Then add it to your `vite.config.js` or `vite.config.ts`:
57+
58+
```js
59+
import { defineConfig } from "vite";
60+
import { nodePolyfills } from "vite-plugin-node-polyfills";
61+
62+
export default defineConfig({
63+
plugins: [
64+
nodePolyfills({
65+
// Whether to polyfill `node:` protocol imports.
66+
protocolImports: true,
67+
}),
68+
],
69+
});
70+
```
71+
72+
### Setting up with Webpack 5+
73+
74+
For Webpack 5+, you can add polyfills to your `webpack.config.js`:
75+
76+
```js
77+
module.exports = {
78+
resolve: {
79+
fallback: {
80+
buffer: require.resolve("buffer"),
81+
},
82+
},
83+
plugins: [
84+
new webpack.ProvidePlugin({
85+
Buffer: ["buffer", "Buffer"],
86+
}),
87+
],
88+
};
89+
```
90+
91+
You'll also need to install the polyfill package:
92+
93+
```sh npm2yarn
94+
npm install buffer
95+
```
96+
4297
---
4398

4499
Now that you've successfully installed the necessary packages, you're ready to start crafting with Ledger's Wallet

0 commit comments

Comments
 (0)