React Native with Windows で大ハマり (ビルド時MSB4018などのトラブルシュート)

React Native(Windows)で遊んでた

とりあえず、テンプレートを動かしてみようと思って、公式Dochttps://microsoft.github.io/react-native-windows/docs/getting-started通りにセットアップするも、ビルド時になぜか動かない。

一つ気になることと言えば、セットアップ時に自動で Build Dependencies をセットアップするps1が途中でフリーズした（ようにみえた）ので、手動でDependenciesを入れたことくらい。

なお、Docにある doctor 的なスクリプトは全部通っている。

PS> iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-vs2019-deps.ps1')
Checking Free space on C: > 15 GB                            OK
Checking Installed memory >= 16 GB                           OK
Checking Windows version > 10.0.16299.0                      OK
Checking Developer mode is on                                OK
Checking Long path support is enabled                        OK
Checking Choco                                               OK
Checking git                                                 OK
Checking Compilers, build tools, SDKs and Visual Studio      OK
Checking NodeJS LTS                                          OK
Checking Chrome                                              OK
Checking Yarn                                                OK
Checking .net core 3.1                                       OK
All mandatory requirements met

出たエラー

具体的に出たエラーはこんな感じ。

× Building Solution: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Microsoft\VC\v160\Mic...
 × Build failed with message 5:7>C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Microsoft\VC\v160\Microsoft.CppBuild.targets(439,5): error MSB4018: "VCMessage" �^�X�N���\�������Ɏ��s���܂����B [C:\Users\xxx\xxx\Common\Common.vcxproj]. Check your build configuration.
Command failed. Re-run the command with --logging for more information.

文字化け。指示通り --logging つけて取り直す。

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Microsoft\VC\v160\Microsoft.CppBuild.targe
       ts(439,5): error MSB4018: "VCMessage" タスクが予期せずに失敗しました。

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Microsoft\VC\v160\Microsoft.CppBuild.targe
       ts(439,5): error MSB4018: System.FormatException: インデックス (0 ベース) は 0 以上で、引数リストのサイズよりも小さくなければなりません。

ググってみる

--logging のログでは文字化けしていなかったものの、手がかり無し。 MSB4018 は比較的様々な場面でビルド時に出てくるエラーのようで、ググる時には React Native の情報に限定するのを気をつけてググってみると・・・。

error MSB4018: The “VCMessage” task failed unexpectedly #8817 すごくこれっぽい・・・・。

Dependencies が整ってない可能性あるなと思い・・・

Issueによれば、Windows 10 SDK (10.0.18362.0) をインストールする必要がある、とのこと。早速インストールしてみるが、状況は変わらない。

Visual Studio を複数環境(Editor 付きと無し)セットアップしてるからか？？？と思い、 2019 をセットアップしている他環境からも「変更」で、インストールをしてみるものの・・・。変わらない。

Issueの関連付けをみてみるとUWPサポートパッケージのインストールも必要的なことも書いてあるっぽいのでUWPサポートも追加してみる。追加でWindows 10, 11のリリース済みSDKを全バージョン入れてみた。・・・するとエラーが変わった。

Unicode.cpp がないらしい

     7>c1xx : fatal error C1083: ソース ファイルを開けません。'Unicode.cpp':No such file or directory [C:\xx\xx\node_modules\react-native-windows\Common\Common.vcxproj]
     7>C:\Program Files (x86)\Windows Kits\10\bin\10.0.19041.0\XamlCompiler\Microsoft.Windows.UI.Xaml.Common.targets(48
       6,5): error MSB4181: "CompileXaml" タスクから false が返されましたが、エラーがログに記録されませんでした。 [C:\xx\xx\node_modules\react-native-windows\Common\Common.vcxproj]
     7>プロジェクト "C:\xx\xx\node_modules\react-native-windows\Common\Common.vcxproj
       " (既定のターゲット) のビルドが終了しました -- 失敗。
     3>C:\xx\xx\node_modules\react-native-windows\Folly\pch.cpp : fatal error C
       1083: コンパイラの中間生成物 ファイルを開けません。'C:\xx\xx\node_modules\react-native-windows
       \folly\build\x64\debug\folly\folly.pch':No such file or directory [C:\xx\xx\node_modules\react-native-windows\Folly\Folly.vcxproj]
     3>C:\Program Files (x86)\Windows Kits\10\bin\10.0.19041.0\XamlCompiler\Microsoft.Windows.UI.Xaml.Common.targets(48
       6,5): error MSB4181: "CompileXaml" タスクから false が返されましたが、エラーがログに記録されませんでした。 [C:\xx\xx\node_modules\react-native-windows\Folly\Folly.vcxproj]

またもやググってみると、それっぽいIssue（https://github.com/microsoft/react-native-windows/issues/8235）はみつかるものの、若干状況が違っていて、ファイルはありそうで・・・。

-a----        2023/01/09     23:08           7528 unicode.cpp
-a----        2023/01/09     23:08           3062 unicode.h

って、なんかキャメルケースになってないけどまさかこれか・・・？？？とおもって適当にリネームするとアタリ。そして再度ビルドを回すと今度は Utilities.h がないという。んでこれも・・・。

-a----        2023/01/09     23:08           1494 utilities.h

とりまリネームした。

んで、こっちの方はといえば・・・

     3>C:\xx\xx\node_modules\react-native-windows\Folly\pch.cpp : fatal error C
       1083: コンパイラの中間生成物 ファイルを開けません。'c:\xx\xx\node_modules\react-native-windows
       \folly\build\x64\debug\folly\folly.pch':No such file or directory [C:\xx\xx\node_modules\react-native-windows\Folly\Folly.vcxproj]
     3>C:\Program Files (x86)\Windows Kits\10\bin\10.0.19041.0\XamlCompiler\Microsoft.Windows.UI.Xaml.Common.targets(48
       6,5): error MSB4181: "CompileXaml" タスクから false が返されましたが、エラーがログに記録されませんでした。 [C:\xx\xx\node_modules\react-native-windows\Folly\Folly.vcxproj]

ファイルはあるし、ケースも正しいように見える。ただ、ログがケースインセンシティブになってるのが気になったのだけど、Windowsってファイルシステムケースセンシティブだっけ？？？違うような・・・と思ったら。

https://learn.microsoft.com/ja-jp/windows/wsl/case-sensitivity#modify-case-sensitivity

ディレクトリごとの大文字と小文字の区別のサポートは Windows 10、ビルド 17107 で開始されました。

まじかよ・・・。

PS C:\xx\xx\> fsutil.exe file queryCaseSensitiveInfo .
ディレクトリ C:\xx\xx\ の大文字と小文字を区別する属性が有効になっています。
PS C:\xx\xx\> fsutil.exe file setCaseSensitiveInfo . disable
ディレクトリ C:\xx\xx\ の大文字と小文字を区別する属性が無効になっています。

確かに有効になっていた・・・。あ・・・再帰的にやらないとじゃん・・・。

PS> (Get-ChildItem -Recurse -Directory).FullName | ForEach-Object {fsutil.exe file setCaseSensitiveInfo $_ enable}

んで、今度こそいくだろ！！！！と思いきや

C:\xx\xx\node_modules\react-native-windows\Fmt\pch.cpp : fatal error C10
       83: コンパイラの中間生成物 ファイルを開けません。'c:\xx\xx\node_modules\react-native-windows\f
       mt\build\x64\debug\fmt\fmt.pch':No such file or directory [C:\xx\xx\node
       _modules\react-native-windows\Fmt\Fmt.vcxproj]

ファイルもある（ケースは違うけど）し、ケースセンシティブ属性も外れてるのを確認済み。万策尽きたな・・・と思いつつも、途中からケースインセンシティブにしたのが気になるので、親ディレクトリのケースセンシティブ属性を変更し、プロジェクト自体を作成し直してみた。

『ビルドできた』（なおすごく重かった）

多分、この react-native-windows を作ってる人はWindows 10がケースセンシティブになる前にファイルシステムを作ってて、その属性が引き継がれているから気付かなかった・・・とかそういうパターンなのかなあ、と妄想。

クロスプラットフォームでビルドしたい人って・・・

大抵ネイティブの事情に明るくない場合が多いんじゃないかって思う。だからこそ.Net じゃなくてReact Nativeで開発しよう～みたいになるわけだし。だけど、ネイティブの事情によってこういうトラブルシュートが必要になるのはまだまだ環境整備がこれからなのかなという印象が強いのだった。まだまだ、こういうクロスプラットフォームにビルドできるツールは、それぞれネイティブで開発できる人が、言語間のスイッチングコストとかソースコードの共通化を目指して使うような感じが現実的だろうなって思った。

あ、一応メインバージョンはまだ0なので、そういう意味ではアーリーアダプターがこういうの一杯踏んでいくしかないよね、っていうのはほんとそう。

おまけ

実はGUIアプリ起動後のアプリケーション自体の起動シーケンスで以下のエラーが出ていて、ビルドはできたけどまだ使えたものではなかったのだった。

Prepare JS runtime timed out, Executor instance is not connected to a WebSocket endpoint.

やれやれだ・・・。

なんとか直そうと思うものの、これを乗り越えたとて、VB/VCランタイムとかでいろいろ大変だった 90年代から2000年代みたいに配布時に問題が起こるとかありそうで前途多難でしかない・・・。