Next.jsで**(べき乗)を使用した際にエラーが出る

Question

Next.jsでべき乗の演算子を使用した際にエラーが発生します。

エラーが発生する場合。
bigint ** bigint
Number(bigint ** bigint)

エラーが発生しない場合
number ** number

具体的には以下のようなエラーが出ます。しかしながら、Next.jsを通さずに実行した場合には正常に実行できることを確認しています。

Unhandled Runtime Error
TypeError: can't convert BigInt to number

  26 |     if (Number.isNaN(number)) return { is: false, value: formattedString, radix, msg: ERR_MSG.character };
  27 | 
> 28 |     sum += bigIntRadix ** count * BigInt(number);
     |           ^
  29 |   }
  30 | 
  31 |   const signedHalf = 2n ** BigInt(bit - 1);

この28行目のエラーを解決しても、同じく31行目がエラーになります。ちなみにbigIntRadix, count, sumはどれもbigintの値が代入されています。

どなたか原因が分かる方はいらっしゃらないでしょうか。

追記:
create-next-app コマンドでnextアプリケーションを作成し、その状態からtsconfig.jsonのtargetをesnextに変更しただけのものでも同じようにべき乗の演算子でエラーが発生する現象がおこります。一方で、create-react-appで実行した際には発生しない問題のため、next側に解決策があるのではないかと考えています。

Comments

[arcxor]

sum も bigint なのでしょうか。

[退会済みユーザー]

記入忘れていました。sumもbigint型で間違いありません。その前の部分で0nで初期化し、そこに足しているという感じです。

Answer 1

元ソース

const bigIntRadix = BigInt(9007199254740991);
const count = BigInt(2);
const number = BigInt(2);
let sum = 0n;

export default function IndexPage() {
  sum = bigIntRadix ** count * number;
  return <div>{sum}</div>;
}

ビルドした場合

next buildやreact-scripts buildにてビルドを行うと、どちらもエラーが発生します。
これは、 （webpack自体かreact-scriptsかはわかりませんが） バンドル時にコードが変換されるためです。

      var u = i(5893),
        r = BigInt(9007199254740991),
        _ = BigInt(2),
        c = BigInt(2),
        e = 0n;
      function f() {
        return (
          (e = Math.pow(r, _) * c),
          (0, u.jsx)("div", { children: e })
        );

Math.powはnumberを引数に取りますので、BigIntが与えられるとcan't convert BigInt to numberエラーが発生します。これはjsの通常の動作です。

DevServerで動かした場合

DevServerで動かした場合、reactではべき乗演算子**が保たれ、nextではビルド時と同様Math.powに変換されています。

react

const bigIntRadix = BigInt(9007199254740991);
const count = BigInt(2);
const number = BigInt(2);
let sum = 0n;

function App() {
  sum = bigIntRadix ** count * number;
  return /*#__PURE__*/(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxDEV)("div", {
 // 省略

next

var bigIntRadix = BigInt(9007199254740991);
var count = BigInt(2);
var number = BigInt(2);
var sum = 0n;
function IndexPage() {
  sum = Math.pow(bigIntRadix, count) * number;
  return /*#__PURE__*/ (0, react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(
 // 省略

この違いによってreactのdevサーバではエラーが出ず、nextでは出る事になっています。
どちらにせよビルドをするとエラーになりますので、べき乗演算子は使用せず、独自の関数を実装することをおすすめします。

追記

変換はbabelによって行われています。べき乗演算子**はes2016で実装されたので（普通に使うブラウザではもう大丈夫ですが）古いブラウザサポートのためにbabelは昔の記法にトランスパイルします。これは正しい仕様です。
es2016以上のブラウザに対応させるにはbabel.config.jsや.babelrcなどで@babel/preset-env/targetsを指定する必要があります。

module.exports = {
  presets: [
    [
      "next/babel",
      {
        "preset-env": {
          targets: {
            chrome: 52,
            edge: 14,
            firefox: 52,
          },
        },
      },
    ],
  ],
};

https://caniuse.com/?search=**

正確なサポートを指定しないのであれば、last 1 versionでも良いと思います。

targets:[
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version",
],

追記2

※ここからの内容は今調べました。

babelがBitIntの変換をサポートしていないからです。変換パフォーマンスの低下を避けることが理由のようです。
前の追記ではサポートブラウザバージョンの指定を提案しましたが、BigIntの計算を行う場合はネイティブのBitIntと同様の動作をするライブラリJSBIを使用したほうが良いかもしれません。

Comments

[退会済みユーザー]

ありがとうございます！これはバグという認識で良いのでしょうか？いつかは修正されるものなのでしょうか？

[退会済みユーザー]

追記ありがとうございます。試してみたところ同じコードでも実行されるようになりました。ちなみに、BigInt自体はES2020で導入されており、べき乗演算子よりも新しい概念だと思うのですが、なぜbigintの使用はエラーにならずにべき乗演算子のみ自動でトランスパイルされていたのでしょうか？時間があれば、教えていただけるとありがたいです！

[退会済みユーザー]

よく理解できました。わざわざお付き合いいただきありがとうございました。本当に助かりました。