Support environments without native `bigint`

[Filmaluco]

I am trying to update a project to the latest libraries, and have the following error:

"dependencies": { ... "@stacks/auth": "^2.0.1", "@stacks/connect": "^5.0.5", "@stacks/profile": "^2.0.1", "@stacks/storage": "^2.0.1", "@stacks/transactions": "^2.0.1", ... }

We were using node: 12.3.0
Updating only this libraries resulted in a error telling us we needed to use a higher version >= 12.13.0

But even inside the node JS 14.17.5
Math.pow(BigInt(2), BigInt(128)) - BigInt(1);
will result in the error:

Cannot convert a BigInt value to a number

Can someone assist?

[joaodiogocosta]

react-dom.development.js?61bb:24994 Download the React DevTools for a better development experience: https://fb.me/react-devtools
intCV.ts?9ea7:4 Uncaught TypeError: Cannot convert a BigInt value to a number
at Math.pow ()
at eval (intCV.ts?9ea7:4)
at Module../node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/clarity/types/intCV.js (vendors.js:2483)
at webpack_require (index.js:85)
at eval (index.ts?b176:1)
at Module../node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/clarity/index.js (vendors.js:2435)
at webpack_require (index.js:85)
at eval (utils.js:26)
at Module../node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/utils.js (vendors.js:2687)
at webpack_require (index.js:85)
eval @ intCV.ts?9ea7:4
./node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/clarity/types/intCV.js @ vendors.js:2483
webpack_require @ index.js:85
eval @ index.ts?b176:1
./node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/clarity/index.js @ vendors.js:2435
webpack_require @ index.js:85
eval @ utils.js:26
./node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/utils.js @ vendors.js:2687
webpack_require @ index.js:85
eval @ authorization.js:26
./node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/authorization.js @ vendors.js:2375
webpack_require @ index.js:85
eval @ transaction.js:6
./node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/transaction.js @ vendors.js:2663
webpack_require @ index.js:85
eval @ index.ts?0e3e:1
./node_modules/@stacks/profile/node_modules/@stacks/transactions/dist/esm/index.js @ vendors.js:2603
webpack_require @ index.js:85
eval @ profileTokens.ts?90df:1
./node_modules/@stacks/profile/dist/esm/profileTokens.js @ vendors.js:2268
webpack_require @ index.js:85
eval @ profile.js:7
./node_modules/@stacks/profile/dist/esm/profile.js @ vendors.js:2208
webpack_require @ index.js:85
eval @ index.ts?0e3e:1
./node_modules/@stacks/profile/dist/esm/index.js @ vendors.js:2196
webpack_require @ index.js:85
eval @ userSession.js:12
./node_modules/@stacks/auth/dist/esm/userSession.js @ vendors.js:1155
webpack_require @ index.js:85
eval @ index.ts?0e3e:1
./node_modules/@stacks/auth/dist/esm/index.js @ vendors.js:1059
webpack_require @ index.js:85
eval @ blockstack_client.js:6
./assets/javascripts/lib/blockstack_client.js @ vendors.js:83
webpack_require @ index.js:85
eval @ index.js?7372:1
./assets/javascripts/pages/index.js @ index.js:192
webpack_require @ index.js:85
20 @ index.js:203
webpack_require @ index.js:85
checkDeferredModules @ index.js:46
(anonymous) @ index.js:167
(anonymous) @ index.js:170

[ahsan-javaid]

1. Try changing your project configurations to use ES2020 under babel.
2. Try adding

"browserslist": {
      "last 2 chrome version",
      "last 2 firefox version",
      "last 2 safari version",
      "last 2 edge version"
},

to your package.json

[zone117x]

Math.pow(...) accepts the type number (64-bit floating point). You should use the native bigint operators instead.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt

[Filmaluco]

Math.pow(...) accepts the type number (64-bit floating point). You should use the native bigint operators instead.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt

I can't do that... Its in the Transactions library from what I could find out.
I can always do a fork I guess... but I think the problem may be something else since no one else seems to complain about this...

[zone117x]

Where are you seeing the line Math.pow(BigInt(2), BigInt(128)) - BigInt(1) ?

There's this in the source
const MAX_U128 = BigInt(2) ** BigInt(128) - BigInt(1);

Seems like the bundler you're using is incorrectly transpiling that to use Math.pow. Something like @ahsan-javaid's suggestion above should fix that.

[Filmaluco]

1. Try changing your project configurations to use `ES2020` under babel.

2. Try adding

"browserslist": {
      "last 2 chrome version",
      "last 2 firefox version",
      "last 2 safari version",
      "last 2 edge version"
},

to your package.json

@ahsan-javaid to use ES2020 under babel I did
npm install --save-dev @babel/plugin-proposal-optional-chaining

Do I need to do extra things?

  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",

[ahsan-javaid]

1. Try changing your project configurations to use `ES2020` under babel.

2. Try adding

"browserslist": {
      "last 2 chrome version",
      "last 2 firefox version",
      "last 2 safari version",
      "last 2 edge version"
},

to your package.json

@ahsan-javaid to use ES2020 under babel I did
npm install --save-dev @babel/plugin-proposal-optional-chaining

Do I need to do extra things?

  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",

Visit the full configuration here. Also add @babel/plugin-syntax-bigint

[Filmaluco]

@ahsan-javaid progress was made :) thank you

[pseudozach]

Update: I was missing @babel/core, issue is not seen anymore. I'll leave this here for archive purposes.

I've been having this issue for months and was manually resolving by changing the below file

Module ../node_modules/@stacks/transactions/dist/esm/clarity/types/intCV.js
const MAX_U128 = eval('BigInt(2) ** BigInt(128) - BigInt(1)')
const MIN_U128 = BigInt(0);
const MAX_I128 = eval('BigInt(2) ** BigInt(127) - BigInt(1)');
const MIN_I128 = eval('BigInt(-2) ** BigInt(127)');

But now it's not working on another system, I've also applied the solutions provided here but still the same error. Any suggestions/fix please? Did I miss something?

package.json
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
    "@babel/plugin-syntax-bigint": "^7.8.3",
...
  "browserslist": [
    "last 2 chrome version",
    "last 2 firefox version",
    "last 2 safari version",
    "last 2 edge version"
  ],

[Filmaluco]

@pseudozach we had the same problems, only some browsers and the most recent ones can/would support these changes. We ended up abandoning the project because of it... So sorry, we never got a better solution than the one the team gave us... It does work! But only for some devices and browsers...

[zone117x]

@Filmaluco do you have specific older browsers that needed support? MDN shows all modern browsers (everything other than Internet Explorer) is supported https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt, and https://caniuse.com/bigint is showing 91% global support.

This lib could be changed to use a bigint polyfill if necessary, but typically web apps that want to support older browsers configure that themselves. For example https://www.npmjs.com/package/babel-plugin-transform-bigint could be used by your web app to polyfill bigint with jsbi.

Any input from @blockstack/ux-team?

[markmhendrickson]

I'd also be curious to hear which browsers in particular @Filmaluco has in mind that aren't supported and have blocked development.

I'm certainly sorry to hear that the project was abandoned. 😕

[aulneau]

@zone117x sometimes certain tools will output Math.pow(BigInt(2), BigInt(128)) - BigInt(1) because they have @babel/plugin-transform-exponentiation-operator included.

If you are using @babel/preset-env, you can exclude it like this:

    presets: [
      [
        '@babel/preset-env',
        {
          modules: isTestEnv ? 'commonjs' : false,
          targets: isTestEnv ? { node: 'current' } : targets,
          loose: false,
          useBuiltIns: false,
          exclude: [
            'transform-async-to-generator',
            'transform-regenerator',
            'transform-exponentiation-operator', // this line here
          ],
        },
      ],
    ],
    ```