Support environments without native `bigint` #1096

Filmaluco · 2021-08-26T15:43:07Z

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?

The text was updated successfully, but these errors were encountered:

joaodiogocosta · 2021-08-26T16:22:23Z

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 · 2021-08-27T07:22:12Z

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

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

to your package.json

zone117x · 2021-08-27T17:00:45Z

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 · 2021-08-30T09:12:24Z

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 · 2021-08-30T16:24:56Z

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 · 2021-09-01T14:04:39Z

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 · 2021-09-01T15:54:14Z

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 · 2021-09-06T10:53:50Z

@ahsan-javaid progress was made :) thank you

pseudozach · 2021-09-24T23:10:27Z

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 · 2021-09-27T14:41:41Z

@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 · 2021-09-28T12:32:14Z

@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 · 2021-09-28T12:52:57Z

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 · 2021-09-28T15:57:36Z

@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
          ],
        },
      ],
    ],
    ```

Filmaluco · 2021-10-07T11:45:00Z

@zone117x @markmhx.
No specific browsers, it was more the fact we were having problems and after "solving" we only were able to solve the problem partially,that we the issues we were having with mobile made us, a very hard decision, drop the project and invest our time in other projects.

0xc22b · 2021-10-19T04:07:52Z

For those who use create-react-app, don't want to reject, and don't need to support IE and Android browser version <= 4.4.4, steps below should fix the issue.

Exclude IE and Android browser version <= 4.4.4 in browserslist in package.json

  "browserslist": {
    "production": [
      ">0.2%",
      "not ie <= 99",
      "not android <= 4.4.4",
      "not dead",
      "not op_mini all"
    ],
    ...
  }

Remove folder .cache in node_modules (if not, changes to the browserslist will have no effect)
yarn run build

Without those old browsers, BigInt ** BigInt won't be converted to Math.pow(BigInt, BigInt) which is the cause of the issue. It doesn't happen in development mode and everyone using default create-react-app will face this error when running the build version. 😰

ref: facebook/create-react-app#10785, babel/babel#13109

zone117x · 2021-10-19T11:40:28Z

Thanks @witwitchayakarn for the tip.

Given the amount of people this is causing problems for, I'm going to re-open this issue and argue that stacks.js should use a bigint polyfill internally. Given that I initially implemented support for native bigint to begin with, I'm happy to take this on.

I'd like the lib to continue supporting native bigint at the typescript level, and allow bigint values to be used and work in environments where they are supported.

0xc22b · 2021-10-19T14:34:01Z

@zone117x Glad I can help. I guess 3 months or 6 months from now, the issue will be gone when those old browsers' usage is less than 0.2%. 😀

dcsan · 2021-11-15T00:01:32Z

holy cow this was a pain to track down in all that minimized production code. It seems it's been blocking people for a month from doing production builds of stacks apps using all the official repos, and people already abandoned the ecosystem cos of this issue.

If there's a PR it might be a good idea to get it merged.

markmhendrickson · 2021-11-17T13:34:38Z

@ahsan-javaid @zone117x any updates on the above PR?

The `babel-plugin-transform-exponentiation-operator ` Babel plugin transforms `1n ** 1n` into `Math.pow(1n, 1n)` which doesn't work because `Math.pow` doesn't support BigInts - facebook/create-react-app#6907 (comment) The fix is to change the `"browsersList"` setting to exclude ie and old android - hirosystems/stacks.js#1096 (comment)

The `babel-plugin-transform-exponentiation-operator ` Babel plugin transforms `1n ** 1n` into `Math.pow(1n, 1n)` which doesn't work because `Math.pow` doesn't support BigInts - facebook/create-react-app#6907 (comment) This is used in `@noble/ed25519` which recently got added to `libp2p-crypto` - libp2p/js-libp2p-crypto#202 The fix is to change the `"browsersList"` setting to exclude ie and old android - hirosystems/stacks.js#1096 (comment)

trying to fix hirosystems/stacks.js#1096

Filmaluco closed this as completed Sep 6, 2021

pseudozach mentioned this issue Sep 29, 2021

Transactions are created in allow mode pseudozach/lnstxbridge-frontend#1

Closed

friedger mentioned this issue Oct 18, 2021

App with react-script throws TypeError: can't convert BigInt to number #1119

Closed

zone117x reopened this Oct 19, 2021

zone117x self-assigned this Oct 19, 2021

zone117x added the P2 label Oct 19, 2021

zone117x changed the title ~~Library updates: Cannot convert a BigInt value to a number~~ Support environments without native bigint Oct 19, 2021

ahsan-javaid mentioned this issue Nov 2, 2021

[Browser support] Fix type error can't convert BigInt to number #1129

Merged

9 tasks

ahsan-javaid linked a pull request Nov 2, 2021 that will close this issue

[Browser support] Fix type error can't convert BigInt to number #1129

Merged

9 tasks

markmhendrickson mentioned this issue Nov 17, 2021

Uncaught TypeError: Cannot convert a BigInt value to a number leather-io/extension#1955

Open

reedrosenbluth closed this as completed in #1129 Nov 30, 2021

achingbrain mentioned this issue Dec 3, 2021

fix: do not transform exponentiation operator ipfs-examples/js-ipfs-examples#96

Merged

mckrava mentioned this issue Dec 10, 2021

TypeError: Cannot convert a BigInt value to a number galacticcouncil/Basilisk-ui-old#34

Closed

peterblockman mentioned this issue Dec 17, 2021

BigInt value issue with @polkadot/x-noble-secp256k1 polkadot-js/common#1321

Closed

D4nte mentioned this issue Jan 5, 2022

Bug: Cannot convert BigInt value to a number. waku-org/js-waku#358

Closed

nud3l mentioned this issue Jan 19, 2022

fix: resolve bigint dependency error in production build interlay/interbtc-ui#127

Merged

ILoomans mentioned this issue Jun 10, 2022

React Native - Conversion from 'BigInt' to 'number' is not allowed (IOS) polkadot-js/common#1522

Closed

nicomiicro added a commit to swim-io/swim that referenced this issue Jun 17, 2022

build(ui): reduce browser support

58b400d

trying to fix hirosystems/stacks.js#1096

jxom mentioned this issue Jun 27, 2023

bug: readContract return "can't convert BigInt to number" wevm/wagmi#2637

Closed

1 task

KholdStare mentioned this issue Sep 8, 2023

TypeError: Cannot convert a BigInt value to a number in react native paulmillr/noble-secp256k1#31

Closed

NatPDeveloper mentioned this issue Sep 15, 2023

Verify iframe failed to load WalletConnect/walletconnect-monorepo#3500

Closed

mcoetzee mentioned this issue Oct 11, 2023

Upgrade wagmi to v1 (part 2) api3dao/api3-dao-dashboard#428

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support environments without native `bigint` #1096

Support environments without native `bigint` #1096

Filmaluco commented Aug 26, 2021

joaodiogocosta commented Aug 26, 2021

ahsan-javaid commented Aug 27, 2021 •

edited

Loading

zone117x commented Aug 27, 2021

Filmaluco commented Aug 30, 2021

zone117x commented Aug 30, 2021

Filmaluco commented Sep 1, 2021

ahsan-javaid commented Sep 1, 2021 •

edited

Loading

Filmaluco commented Sep 6, 2021

pseudozach commented Sep 24, 2021 •

edited

Loading

Filmaluco commented Sep 27, 2021

zone117x commented Sep 28, 2021

markmhendrickson commented Sep 28, 2021

aulneau commented Sep 28, 2021

Filmaluco commented Oct 7, 2021

0xc22b commented Oct 19, 2021

zone117x commented Oct 19, 2021 •

edited

Loading

0xc22b commented Oct 19, 2021

dcsan commented Nov 15, 2021

markmhendrickson commented Nov 17, 2021

Support environments without native bigint #1096

Support environments without native bigint #1096

Comments

Filmaluco commented Aug 26, 2021

joaodiogocosta commented Aug 26, 2021

ahsan-javaid commented Aug 27, 2021 • edited Loading

zone117x commented Aug 27, 2021

Filmaluco commented Aug 30, 2021

zone117x commented Aug 30, 2021

Filmaluco commented Sep 1, 2021

ahsan-javaid commented Sep 1, 2021 • edited Loading

Filmaluco commented Sep 6, 2021

pseudozach commented Sep 24, 2021 • edited Loading

Filmaluco commented Sep 27, 2021

zone117x commented Sep 28, 2021

markmhendrickson commented Sep 28, 2021

aulneau commented Sep 28, 2021

Filmaluco commented Oct 7, 2021

0xc22b commented Oct 19, 2021

zone117x commented Oct 19, 2021 • edited Loading

0xc22b commented Oct 19, 2021

dcsan commented Nov 15, 2021

markmhendrickson commented Nov 17, 2021

Support environments without native `bigint` #1096

Support environments without native `bigint` #1096

ahsan-javaid commented Aug 27, 2021 •

edited

Loading

ahsan-javaid commented Sep 1, 2021 •

edited

Loading

pseudozach commented Sep 24, 2021 •

edited

Loading

zone117x commented Oct 19, 2021 •

edited

Loading