回答編集履歴

2

babelとBigIntの関係について追記

2022/04/27 03:09

投稿

k_a
k_a

スコア983

test CHANGED
@@ -88,3 +88,10 @@
88
88
  ],
89
89
  ```
90
90
 
91
+ ## 追記2
92
+ ※ここからの内容は今調べました。
93
+
94
+ babelがBitIntの変換をサポートしていないからです。変換パフォーマンスの低下を避けることが理由のようです。
95
+ 前の追記ではサポートブラウザバージョンの指定を提案しましたが、BigIntの計算を行う場合はネイティブのBitIntと同様の動作をするライブラリ[JSBI](https://github.com/GoogleChromeLabs/jsbi)を使用したほうが良いかもしれません。
96
+
97
+

1

解決策の追記

2022/04/27 01:44

投稿

k_a
k_a

スコア983

test CHANGED
@@ -1,5 +1,3 @@
1
- ※React及びNextの内部仕様には詳しくないため間違っている可能性があります。
2
-
3
1
  ## 元ソース
4
2
  ```jsx
5
3
  const bigIntRadix = BigInt(9007199254740991);
@@ -15,7 +13,7 @@
15
13
 
16
14
  ## ビルドした場合
17
15
  `next build`や`react-scripts build`にてビルドを行うと、どちらもエラーが発生します。
18
- これは、(webpack自体かreact-scriptsかはわかりませんが)バンドル時にコードが変換されるためです。
16
+ これは、 ~~(webpack自体かreact-scriptsかはわかりませんが)~~ バンドル時にコードが変換されるためです。
19
17
  ```js
20
18
  var u = i(5893),
21
19
  r = BigInt(9007199254740991),
@@ -56,4 +54,37 @@
56
54
  // 省略
57
55
  ```
58
56
  この違いによってreactのdevサーバではエラーが出ず、nextでは出る事になっています。
59
- どちらにせよビルドをするとエラーになりますので、べき乗演算子は使用せず、独自の関数を実装することをおすすめします。
57
+ ~~どちらにせよビルドをするとエラーになりますので、べき乗演算子は使用せず、独自の関数を実装することをおすすめします。~~
58
+
59
+ ## 追記
60
+ 変換はbabelによって行われています。べき乗演算子`**`はes2016で実装されたので(普通に使うブラウザではもう大丈夫ですが)古いブラウザサポートのためにbabelは昔の記法にトランスパイルします。これは正しい仕様です。
61
+ es2016以上のブラウザに対応させるには`babel.config.js`や`.babelrc`などで`@babel/preset-env/targets`を指定する必要があります。
62
+ ```babel.config.js
63
+ module.exports = {
64
+ presets: [
65
+ [
66
+ "next/babel",
67
+ {
68
+ "preset-env": {
69
+ targets: {
70
+ chrome: 52,
71
+ edge: 14,
72
+ firefox: 52,
73
+ },
74
+ },
75
+ },
76
+ ],
77
+ ],
78
+ };
79
+ ```
80
+ https://caniuse.com/?search=**
81
+
82
+ 正確なサポートを指定しないのであれば、last 1 versionでも良いと思います。
83
+ ```
84
+ targets:[
85
+ "last 1 chrome version",
86
+ "last 1 firefox version",
87
+ "last 1 safari version",
88
+ ],
89
+ ```
90
+