BigInt value issue with @polkadot/x-noble-secp256k1

[marcelomizuki]

Hi,

I am having an issue with BigInt with the latest libraries. I have tried multiple
library combinations from the prior Closed BigInt issues, but cannot seem to find a good solution.

Any suggestions would be appreciated. I am using Webpack 4 and cannot switch easily to
Webpack 5.

Thanks

"@polkadot/api": "^6.12.1",
"@polkadot/extension-dapp": "^0.42.2",
"@polkadot/ui-keyring": "^0.87.5",
"@polkadot/ui-settings": "^0.87.5",
"@polkadot/keyring": "^8.0.2",
"@polkadot/networks": "^8.0.2",
"@polkadot/util": "^8.0.2",
"@polkadot/util-crypto": "^8.0.2",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.3"

},
"resolutions": {
"@polkadot/keyring": "8.1.2",
"@polkadot/util": "8.1.2",
"@polkadot/util-crypto": "8.1.2"
},

[jacogr]

It is not WP4 related, rather is is due to your Babel config. It takes output such as BigInt(2) ** BigInt(256) and transforms it into Math.pow(BigInt(2), BigInt(256)) which then fails on execution.

Either -

• exclude transform-exponentiation-operator or
• adjust your browsers so Babel doesn't add the transform

Here is the same issue with links to the same issue found in other places, https://github.com/polkadot-js/api/issues/4290

[marcelomizuki]

Thanks for the feedback, Jaco,

I have been trying to do the Babel exclusion, but the browser does not seem to
bypass the "transform-exponentiation-operator"

I will post back when I find a way to make it work.

Thanks

[marcelomizuki]

Hi Jaco,

Just an update on the issue.

My React App was not seeing my ".babelrc" because I had to "rewire" the app and use a "config-overrides.js" file along with "customize-cra".

Even so it did not work.

What fixed the issue was following "witwitchayakarn"'s instructions on modifying the browserlist which was your second recommendation.

The issue should be resolved and I see the correct account values with the latest API.

Thanks a lot!

[peterblockman]

@marcelomizuki I am having the same issue. Could you please share "witwitchayakarn"'s instructions on modifying the browserlist?

Update: I found it here hirosystems/stacks.js#1096 (comment)

[marcelomizuki]

@marcelomizuki I am having the same issue. Could you please share "witwitchayakarn"'s instructions on modifying the browserlist?

Update: I found it here blockstack/stacks.js#1096 (comment)

Yes, that worked for me. Good luck!

[5elfle5]

I'm having the same issue with react native. How can I disable transform-exponentiation-operator plugin for react native?

[silva-fj]

I'm having the same issue with react native. How can I disable transform-exponentiation-operator plugin for react native?

It seems that excluding the plugin in the babel config for metro-react-native-babel-preset does not work. As a workaround you can use patch-package with the following patch:

diff --git a/node_modules/metro-react-native-babel-preset/src/configs/main.js b/node_modules/metro-react-native-babel-preset/src/configs/main.js
index caa45fe..481655a 100644
--- a/node_modules/metro-react-native-babel-preset/src/configs/main.js
+++ b/node_modules/metro-react-native-babel-preset/src/configs/main.js
@@ -124,11 +124,11 @@ const getPreset = (src, options) => {
     extraPlugins.push([require("@babel/plugin-transform-async-to-generator")]);
   }
 
-  if (!isHermes && (isNull || src.indexOf("**") !== -1)) {
-    extraPlugins.push([
-      require("@babel/plugin-transform-exponentiation-operator")
-    ]);
-  }
+  // if (!isHermes && (isNull || src.indexOf("**") !== -1)) {
+  //   extraPlugins.push([
+  //     require("@babel/plugin-transform-exponentiation-operator")
+  //   ]);
+  // }
 
   if (!isHermes && (isNull || src.indexOf("Object.assign")) !== -1) {
     extraPlugins.push([require("@babel/plugin-transform-object-assign")]);

[polkadot-js-bot]

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.