react-nativeプロジェクト、0.57.4から0.59.10にアップデートした際に起こったエラー

react-nativeプロジェクトをなんとか頑張って0.57.4から0.59.10にアップデートすることがようやく完了した(android64bit対応後のバージョンじゃないともうアップデートも出来ないので…)。

 

その際、ビルドは問題なかったが動かしてみると、特定のページで、PieChart method.bind is not a function index.js 85 というような赤い画面のエラーが出てしまっていた。

 

これは調べてみると、react-native-chart-kitでエラーを起こしていたようで、最新(4.5.0)にあげてみたものの、今度は、library not found for -lRNSVGというエラーが出てビルドが通らなくなってしまった…。

 

ただこれは自分がpackage.jsonに4.5.0と書いたのちnpm update react-native-chart-kitを実行した後に、

react-native-chart-kit@4.5.0 requires a peer of react-native-svg@> 6.4.1 but none is installed. You must install peer dependencies yourself.

というエラーを出ていたのを見逃してしまっていたからで、

npm install react-native-svg

を実行してきちんとreact-native-svgを入れてから再ビルドすることでビルドも通り、赤い画面のエラーも起こらなくなった。

react-nativeの、バージョンアップの際に起こったエラー

xcodeで実行すると、

main.jsbundle does not exist

というビルドエラーが出る

xcodeにリンクしているmain.jsbundleを一度消して、再度xcodeにリンクしなおせばokだった。

(jsbundleがない場合、

[React Native]main.jsbundle does not exist - KOKENSHAの技術ブログ

の方法で再作成できそう)

 

 

 

npm startすると失敗する。

エラーは

internal/modules/cjs/loader.js:800
throw err;
^

Error: Cannot find module './bundle/unbundle'

が出ている。

(※この状態でxcodeから実行すると、

React Native version mismatch. エラーが出ていた。

android studioで起動すると、赤い画面のエラーが出ていた)

 

に回答があるように、2つのファイルから

require('./bundle/unbundle'),

を取り除けば大丈夫だった。(それで直るのか…という感じではあったが…)

 

 

 

xcodeで起動しようとするとビルドは成功するが、立ち上がるとすぐに

Exception '*** -[__NSArrayM objectAtIndexedSubscript:]: index 1 beyond bounds [0 .. 0]' was thrown while invoking getInitialURL on target LinkingManager with params (

というエラーでアプリがクラッシュする

0.59.9以降で直っている模様だが、それ以前のバージョンの場合、

以下の箇所をいじることでひとまず起動するようには出来た。

 

 

総じて、react-nativeは謎の依存関係問題?が多すぎてバージョンアップすると上記のようなよくわからないエラーがかなり出てきて、今後reactで開発していっていいのかとすら思ってきてしまってます…。

Airbnbアプリはreact-nativeでの開発をやめたというニュースもありますし、一周回ってネイティブ開発がエンジニアの数も多いでしょうし結局トータルの工数もそこまで変わらないのかもしれませんね…

フリーランスと国民年金

人それぞれ考えはると思うが、個人的には、年金は納めたほうが断然良いと感じている。(そもそも義務なのではという話は置いておいて…)

 

フリーランスの場合、国民年金に加入することになる。

 

多くの人がうっすらと感じている「そもそも払い損なんじゃないの?」という疑問はあると思うので、ざっくりと計算してみることにする。

 

今現在、受給期間いっぱいまで支払って満額もらうとしたら約月額65,000円。年約65万とのこと。

だいぶ少ないように感じるが事実、この金額だ。

(※フリーランスの方でも何年か厚生年金に加入していることは多いと思うので、実際にはもう1万くらいはプラスになっていることが多いとは思う。また70歳まで繰り下げることで4割ほど増やしてもらえるので、おおよそ9万くらいまでは増額が可能だが…

この辺りの試算は

年金の繰り下げする?しない?70歳からの年金はお得なのか | リクルート運営の【保険チャンネル】

が詳しかった)

 

令和2年の国民年金月額は、16,540円。年約20万になる。

これを思いっきりざっくりと、20〜59歳までの40年間支払うとしたら、約800万。

 

また忘れてはいけないのが全額経費扱いになり、利益と相殺できるが、それが大きい。なので多くの人が実質20%引きくらいで計算して良いと思う。(※実際、収入が高くなった場合はそれ以上に割引効果は出るが、ここではわかりやすくするため、一律20%と計算する)

 

つまり、実際にはトータルで640万を払っている事となる。

その払った金額に対し、年65万年金をもらい続けるとすると、約10年で元を取れる計算となる。

 

つまり、65歳+10歳、75歳まで生きれば元が取れる、ということになる。

(…もちろん、その頃には受給開始が70歳になっている可能性も高いとは思うが、それでも80歳まで生きれば元を取ることが出来る)

 

75歳や80歳まで生きない確率も結構あるのでは?という意見もあると思う。今現在の男性の平均寿命が81.25歳。確かにこの数値を見るとギリギリ感はある。

 

だが現実には、日本人の寿命は過去のデータから、10年で約2歳くらい延び続けている。つまり、今30歳の人が70歳になる40年後は、8歳くらい平均寿命が延びて、平均90歳に延びている可能性はかなり高いと思われる。

 

となると、70歳くらいから、80歳までの+10年分の年金を受け取れる可能性がかなり高く、しかも90歳まで生きる可能性も結構あり、さらに+10年分受け取れる可能性もあるという、中々魅力的な制度になっていると思う。

 

 

※実際には障害をおってしまった場合の障害年金、配偶者が亡くなってしまった場合の遺族年金という2つの制度もあり、お得感は更にある。

 

※また付加保険料(月400円)をプラスするという制度もあり、これは受給後、2年で支払った額を取り戻せて、その後ずっと加算され続けるので、損をするケースがかなり限られているのでやったほうが良いと思う。

 

※収める時は、毎年2月末まで受け付けている、クレジットカードでの2年前納を絶対におすすめしたい。

2年分の380,880円を先払いすることで、14,520円割引となる。

さらに、クレジットカードによっては1%~1.5%くらいは返してくれるカードが多いので、そういうのでやれば4,000円くらいはさらに戻ってくる。

合計2万円近く、およそ5%戻ってくるのは非常に大きく、さらにお得感を出すことが出来る。

他の方が作られたreact nativeプロジェクトを引き継いだ際に起こったエラーなどへの対応まとめ

■npx react-native run-android
を行うと、

* What went wrong:
Could not determine java version from '11.0.5'.
というエラーが…。

android/gradle/wrapper/gradle-wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

distributionUrl=https\://services.gradle.org/distributions/gradle-5.5-all.zip
に変えて再度実行でokだった。

 

 

■* What went wrong:
A problem occurred configuring project ':app'.
> java.lang.NullPointerException (no error message)

android/gradle.properties
に、jdkのパスを追加。

ただ、こちらでは、
org.gradle.java.home=/Library/Java/JavaVirtualMachines/jdk-12.0.2.jdk/Contents/Home
とかの、本来指定すべきようなパスではだめで、android studioのproject structureから確認できる、JDKのパスを入れないとだめだった。
(org.gradle.java.home=/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home のようなパスを指定した)

 

 

 

■> Task :react-native-line-sdk:compileDebugJavaWithJavac FAILED
node_modules/react-native-line-sdk/android/src/main/java/com/xmartlabs/lineloginmanager/LineLogin.java:76: エラー: getLoginIntentに適切なメソッドが見つかりません(Context,String)
Intent intent = LineLoginApi.getLoginIntent(context, channelId);
^
メソッド LineLoginApi.getLoginIntent(Context,String,LineAuthenticationParams)は使用できません
(実引数リストと仮引数リストの長さが異なります)
メソッド LineLoginApi.getLoginIntent(Context,LineAuthenticationConfig,LineAuthenticationParams)は使用できません
(実引数リストと仮引数リストの長さが異なります)
/Users/kuniakisuzuki/Desktop/work/github/admissions_app/node_modules/react-native-line-sdk/android/src/main/java/com/xmartlabs/lineloginmanager/LineLogin.java:135: エラー: シンボルを見つけられません
result.putString("accessToken", accessToken.getAccessToken());
^
シンボル: メソッド getAccessToken()
場所: タイプLineAccessTokenの変数 accessToken
エラー2個

 

これは、./node_module/react-native-line-sdk の更新が必要。

1.3以降、まだリリースされていないが、line公式sdk側の更新に伴い、

修正されている項目がありそれを適用しないとビルドエラーが出る。

なので現在のgitの最新を持ってくるように書き換え。

(フォークされているものかもしれないが、

https://github.com/nonth/react-native-line だとこの問題に対して更新されていたので、

このurlを直接package.jsonのlineの所に置き換えて書いて、

npm updateをして取ってきた)

 

 

■> Task :react-native-orientation:processDebugAndroidTestResources FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-orientation:processDebugAndroidTestResources'.

 

https://github.com/yamill/react-native-orientation/issues/318

を手動で適用(git上でコミットもまだされていないので…)

※/build.gradleのバージョンを書き換えた

※同様のエラーがreact-native-svgでも出たので、同様の対応をした。

 

 

■* What went wrong:
Execution failed for task ':app:transformClassesWithDesugarForDevelopmentDebug'.

android.enableD8.desugaring = true
を/android/gradle.propertiesに入れた

 


■* What went wrong:
Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDevelopmentDebug'.

https://stackoverflow.com/questions/47079113/android-studio-3-0-execution-failed-for-task-unable-to-merge-dex
を見て、multiDexEnabled true を入れた(multiDexEnabled = true のようにイコールはなくてok)

 

 

■* What went wrong:
A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:developmentDebugCompileClasspath'.
> Could not resolve project :react-native-orientation.

android 64bit対応をしないとリリースできないので、0.59.1以降にしようとしてビルドしたら起きた。react-native-orientationだと更新がなくビルドが通らないので、

その後更新されている、react-native-orientation-lockerに変えた。(npm linkとunlinkを忘れずに)

 

 

■* What went wrong:
A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:developmentDebugCompileClasspath'.
> More than one variant of project :react-native-svg matches the consumer attributes:
- Configuration ':react-native-svg:debugApiElements' variant android-aidl:

npm add react-native-svg でライブラリのアップデートが必要。

https://www.npmjs.com/package/react-native-svg

にもあるが、react-nativeに合うバージョンがある。

自分は普通に上記コマンドで最新版(10.0.0)に上げてしまって大丈夫だった。

(※npm list --depth=0

で現在入れているライブラリのバージョンが確認できる)

 

※また、上記のようにライブラリの名前指定で出るエラーは、概ね、同様にライブラリをアップデートすることで解消した。

awsのec2インスタンス上のmysqlが乗っ取られる…ビットコインを払えだと…?!

To recover your lost Database send 0.03 Bitcoin (BTC) to our Bitcoin address xxxxxx and contact us by Email with your Server IP or Domain name and a Proof of Payment. Your Database is downloaded and backed up on our servers. Backups that we have right now: xxxxxx, main. Any email without your server IP Address or Domain Name and a Proof of Payment together will be ignored. If we dont receive your payment in the next 10 Days, we will delete your backup.

 

という文章が、PLEASE_READ_ME_VVV というテーブルが勝手に作られたようでその中に書かれていた…。幸い、別にたいしたデータは入っていなかったので大きな問題は無かったが、まさかクラックされることがあるとは…。

 

通常、mysqllocalhostからしかアクセスできないようになっているかと思いきや、mysql > SELECT Host, User, Password FROM mysql.user; で見てみると、なぜかこのサーバはアプリサーバとか別の場所から接続させたいのか、ワイルドカード設定(%)が入っていてそれで外部のどこからもアクセスできてしまっていて、パスワードを解析されて入られてしまった模様…。

 

f:id:suzuki_kuni:20191118030935p:plain

 

その仕様は自分ではわからず変えられないと思われるので(もしくはvpcで外側から防げば良いと思うが…)一応、ユーザーを新規に作りパスワードをmaxの64文字に設定し直した。それでもクラックされてしまうのだろうか…様子を見たいと思う。

 

 

Androidにsvgを持っていく際のエラー

resフォルダの上で右クリック→new→Vector Assetsでsvgファイルを取り込めるが、この際にいくつかエラーが起こっていて解消したのでメモを…。

 

1

取り込みの際に、textタグをサポートしていない、という警告が出ていた。これは、いわゆるフォントをラスタライズをする必要がある。フリーのソフトだと、Inkscopeで開き、オブジェクトをパスに変換すればok。もしくはそもそも素材提供元に、ラスタライズしてくださいって言ってもいいと思う。(フォント持ってなかったら面倒ですしね…)

bridge-1.co.jp

 

2

上記を修正し、問題なく読み込めると思いきや、今度はビルドの際に、

AAPT: error: 'square' is incompatible with attribute strokeLineJoin (attr) enum [bevel=2, miter=0, round=1].

というエラーが…。

これは、svgのstroke-linejoin="square" という部分を削除したら大丈夫だった。削除しても見た目は変わらなかったのでokとした。

 

electronでwindows向けアプリを作ってみた時の注意点

・当たり前といえば当たり前だが、ウインドウサイズ変更時に画面を引き伸ばしたりなどはしてくれない。このようなjsを読み込ませるようにして対応。

https://gist.github.com/kuniakisuzuki/772e8538a79246d1977c1887a25d035c

 

jquery動かない問題

<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>

window.jQuery = window.$ = require('./js/jquery-3.4.1.min.js');
みたいに書き換え。

 

 

・packagerでパッケージングして、そのexeから動かした時のみの挙動だが、

例えばある階層の画像ファイルを全てリスト化したい、といった場合、

 

var path = require('path');

var pathFile = path.join(__dirname, "image/");

 

var fs = require('fs');

if (!fs.existsSync(pathFile)) {

  alert("画像データフォルダが見つかりません。「" + pathFile + "」に存在しているか、確認してください");

  return;

}else{

  var files = fs.readdirSync(pathFile);

}

 

みたいな感じで、pathを、require('path')を使ってフルパスで作成しないと、fs関数に渡した時に、常にファイルが無いと言われてしまった。(html的な相対パスではだめで、pcから見た場合の絶対パスを渡さないとだめなのかもしれない)

 

 

・electronをパッケージングする設定を書くmain.jsの、

new BrowserWindowmへ渡すwebPreferencesオプションで、

webPreferences: {
  ..
  nodeIntegration: true
}

みたいに、nodeIntegration: trueを入れないと、require('fs')がなどのrequire関数が使えなかった。