【ReactNative開発】Native-Baseのバージョンを上げたら”Unable to resolve module native-base/Fonts/Roboto.ttf”エラーが出るようになった

こんにちは、今回もReact Native開発におけるトラブルメモです。エラーばっかりでめげそう笑

問題

Native-Baseのモジュールを直近化したところ、ReactNativeアプリが以下のエラーを吐いて起動しなくなった。

Failed building JavaScript bundle.
Unable to resolve module native-base/Fonts/Roboto.ttf from /Users/yutaroinoue/Workspace/MyFirstProjectTypeScript/App.tsx: native-base/Fonts/Roboto.ttf could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*

  24 |     console.log("## CALL APP COMPONENTDIDMOUNT")
  25 |     await Font.loadAsync({
> 26 |       'Roboto': require('native-base/Fonts/Roboto.ttf'),
     |                          ^
  27 |       'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
  28 |       ...Ionicons.font,
  29 |     })

原因と解決法

ここでヒントを見つけた。

https://github.com/GeekyAnts/NativeBase/issues/2731#issuecomment-513445619

確かに、最新版(3.0.3)のNode_Modules配下のNativeBaseのディレクトリ構成を見ると、そもそもFontsディレクトリがない・・仕組みが変わったのかな・・・?

古いバージョンのNativeBase (2.15.0とか)にダウングレードすることで、Fontsディレクトリも復活し、無事動作するようになった。

yarn remove native-base
yarn add native-base@2.15.0

ライブラリのバージョンアップにはこんな破壊的な変更もあるので、注意が必要ですね・・・。

おしまい

この記事を気に入っていただけたらシェアをお願いします!

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。