Using `BigInt` primitives

[benfletcher]

Is this a bug report?

No

Did you try recovering your dependencies?

n/a

Which terms did you search for in User Guide?

bigint, babel plugin,babel syntax macro, "Identifier directly after number"

Environment

n/a

Steps to Reproduce

(Write your steps here:)

1. Use a BigInt primitive, e.g., 42n
2. Define supported browsers in package.json to be last 1 chrome version. I.e., ignore targets that haven't implemented BigInts yet.

Expected Desired Behavior

A way to use BigInt primitives in CRA without ejecting.

BigInt (Spec) is currently at Stage 4, with support in Node (since 10.4) and all major desktop and mobile browsers Caniuse details.

Side note: You can get partial support by declaring the global (/* global BigInt */) if each BigInt is wrapped (BigInt(42) or BigInt('42')). However this still means that a code rewrite will be needed once full support lands to remove the clunky syntax.

Actual Behavior

Syntax error:

Identifier directly after number

Reproducible Demo

const foo = 42n;

(Edited to reflect this proposal has moved to Stage 4 and has additional browser support and removed reference to the Babel plugin which is no longer necessary.)

[fzaninotto]

BigInt is now shipped in evergreen browsers (https://caniuse.com/?search=bigint). But create-react-app doesn't seem to allow it yet.

[japrescott]

it is now possible to use BigInt in supported environments, however it is not possible to use the ** operator as it is converted to Math.pow which doesn't support BigInt causing transpiled/optimised code to fail.

Apparently the solution is to somehow deactivate babel-plugin-transform-exponentiation-operator but I have not managed to disable it in react-scripts or babel-react-preset.

My workaround was to write my own pow function that uses BigInt for my simple usecase

export function simplePow(x: bigint, y: bigint) {
	let calced = 1n;
	for (let i = 0, e = y; i < e; i++) {
		calced *= x
	}
	return calced;
}