Hi for everyone. I have an issue, in my vue application I have import ic-vetkd-utils, and got error " Text decoder is not a constructor". I tried to additionally import text-encoding before ic-vetkd-utils but error still appear.
TextDecoder is a native browser API: TextDecoder - Web APIs | MDN
You shouldn’t need any polyfill for this. text-encoding is deprecated and no longer maintained, as of 5 years ago.
What browser are you using?
Google Chrome Version 120.0.6099.199 (Official Build) (64-bit)
That’s really strange… Unless you’re doing some server-side rendering or something, I can’t think of any reason why that would happen.
Have you tried creating a new project to reproduce the issue in isolation from your main project? If you do that and you still have the issue, please share and I can take look at it.
1 Like
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import * as vetkd from "ic-vetkd-utils";
const hex_decode = (hexString: any) => {
if (!hexString) return;
return Uint8Array.from(
hexString.match(/.{1,2}/g).map((byte: any) => parseInt(byte, 16))
);
};
const hex_encode = (bytes: any) =>
bytes.reduce(
(str: string, byte: any) => str + byte.toString(16).padStart(2, "0"),
""
);
async function ibe_encrypt({
actor,
message,
principal,
}: {
actor: any;
message: string;
principal: any;
}): Promise<any> {
const pk_bytes_hex = await actor.ibe_encryption_key();
const message_encoded = new TextEncoder().encode(message);
const seed = window.crypto.getRandomValues(new Uint8Array(32));
const ibe_ciphertext = vetkd.IBECiphertext.encrypt(
hex_decode(pk_bytes_hex),
principal.toUint8Array(),
message_encoded,
seed
);
return hex_encode(ibe_ciphertext.serialize());
}
async function ibe_decrypt({
actor,
ibe_ciphertext_hex,
principal,
}: {
actor: any;
ibe_ciphertext_hex: string;
principal: any;
}) {
const tsk_seed = window.crypto.getRandomValues(new Uint8Array(32));
const tsk = new vetkd.TransportSecretKey(tsk_seed);
const ek_bytes_hex = await actor.encrypted_ibe_decryption_key_for_caller(tsk.public_key());
const pk_bytes_hex = await actor.ibe_encryption_key();
const k_bytes = tsk.decrypt(
hex_decode(ek_bytes_hex),
hex_decode(pk_bytes_hex),
principal.toUint8Array()
);
const ibe_ciphertext = vetkd.IBECiphertext.deserialize(
hex_decode(ibe_ciphertext_hex)
);
const ibe_plaintext = ibe_ciphertext.decrypt(k_bytes);
return new TextDecoder().decode(ibe_plaintext);
}
</script>
I created new vite vue ts application, install ic-vetkd-utils, add code from dfinity suggestions repo
{
"name": "vet-keys",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"ic-vetkd-utils": "^0.2.1",
"vue": "^3.3.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
"typescript": "^5.2.2",
"vite": "^5.0.8",
"vue-tsc": "^1.8.25"
}
}
Could you publish the new project to reproduce on GitHub and share it?
Thanks for sharing.
The issue seems to be that ic-vetkd-utils is built to work on NodeJS, not the browser. @b3hr4d would you consider updating this package to be built with wasm-pack build --release --target web instead of wasm-pack build --release?
In the meantime, if you want to work around your issue, you could build the package yourself. I’ve opened a PR against your repo demonstrating how to do that: build vetkd-utils locally by nathanosdev · Pull Request #1 · VladK1997/vet-keys · GitHub
You’ll need wasm-pack, Rust, and pnpm installed to be able to build it.
Run this to build it:
pnpm -F vetkd-utils build
And then pnpm dev to run your dev server as usual.
2 Likes
Thak you, I will try and than notify)
can you show the exact operation?
This is because of the PNPM workspace protocol, I guess you took the changes from my branch here: build vetkd-utils locally by nathanosdev · Pull Request #1 · VladK1997/vet-keys · GitHub. You need to run install with PNPM instead of NPM for that to work, but if you’re using the updated library now then you can revert those changes and stick with NPM.