Issue: Uncaught TypeError in @bnb-chain/greenfield-chain-sdk with @ethereumjs/util dependency

[jlvihv]

Hello,

I hope this message finds you well. I am currently encountering an issue while using your project, specifically the @bnb-chain/greenfield-chain-sdk package with the dependency on @ethereumjs/util. I have provided the necessary information below for better troubleshooting:

Project Details:

• Package: @bnb-chain/greenfield-chain-sdk
• Version: 0.2.1-alpha.1

Error Details:

• Error Message: Uncaught TypeError in constants.js: Cannot read properties of undefined (reading 'from')
• Error Stack Trace:

  constants.ts:43 Uncaught TypeError: Cannot read properties of undefined (reading 'from')
    at node_modules/.pnpm/@ethereumjs+util@8.0.6/node_modules/@ethereumjs/util/dist/constants.js (constants.ts:43:38)
    at __require2 (chunk-HYZYPRER.js?v=4ebee2a9:15:50)
    at node_modules/.pnpm/@ethereumjs+util@8.0.6/node_modules/@ethereumjs/util/dist/index.js (index.ts:4:1)
    at __require2 (chunk-HYZYPRER.js?v=4ebee2a9:15:50)
    at index.js:6:39
  

Environment:

• Vue.js Version: 3.3.4
• Node.js Version: 18.16.16
• pnpm Version: 8.6.0

Steps to Reproduce:

1. Install the project with the provided package.json configuration.
2. Create an App.vue file with the provided script section.
3. Run the application.
4. Encounter the above-mentioned error.

Additional Details:

• @bnb-chain/greenfield-chain-sdk is utilizing the @ethereumjs/util package, and the error occurs when accessing the 'from' property in the constants.js file.
• I have attempted to downgrade the @ethereumjs/util package to version 8.0.5, but the issue persists.
• The error occurs in a Vue.js application using the Vue 3 composition API.

Code Sample:

<template></template>

<style></style>

<script setup lang="ts">
import { Client } from "@bnb-chain/greenfield-chain-sdk";
import { onMounted } from "vue";

const GRPC_URL = "https://gnfd-testnet-fullnode-tendermint-us.bnbchain.org";
const GREEN_CHAIN_ID = "5600";

onMounted(async () => {
  if (typeof window.ethereum !== "undefined") {
    console.log("MetaMask is installed!");
    try {
      let res = await window.ethereum.request({
        method: "eth_requestAccounts",
      });
      console.log("metamask address:", res[0]);
      let address = res[0];

      const client = Client.create(GRPC_URL, GREEN_CHAIN_ID);
      let account = await client.account.getAccount(address);
      console.log("greenfield account:", account);
    } catch (e) {
      console.error("error: ", e);
    }
  } else {
    console.log("MetaMask is not installed.");
  }
});
</script>

Package.json:

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
  },
  "dependencies": {
    "@bnb-chain/greenfield-chain-sdk": "0.2.1-alpha.1",
    "pinia": "^2.1.3",
    "vue": "^3.3.4",
    "vue-router": "^4.2.1"
  },
  "devDependencies": {
    "@tsconfig/node18": "^2.0.1",
    "@types/node": "^18.16.16",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/tsconfig": "^0.4.0",
    "npm-run-all": "^4.1.5",
    "typescript": "4.7.4",
    "vite": "^4.3.9",
    "vue-tsc": "^1.6.5"
  }
}

I would greatly appreciate your assistance in resolving this issue. If there are any known workarounds, specific configuration changes, or updates that can help resolve the issue, please let me know. If you require any additional information or code samples, please don't hesitate to ask.

Thank you for your time and support. I look forward to your response.

Best regards

[rk]

Hi, it may not be a problem with the package.Instead, there is most likely a package conflict in the project.

What kind of packaging tools aren't used: code: https://codesandbox.io/s/happy-morning-zymh3g?file=/src/index.ts