React-Native從0.63.2升級到0.65.1版問題解法集合

這個升級其實沒什麼實際理由只是想升升看,沒想到問題也是很多。

以下分為建置跟測試兩方面的問題整理解法


建置方面的問題:

1. Error: ENOSPC: System limit for number of file watchers reached

Error: ENOSPC: System limit for number of file watchers reached, watch 'node_modules/metro/node_modules/@babel/plugin-transform-unicode-regex/node_modules/@babel/parser/lib'
at FSWatcher.<computed> (node:internal/fs/watchers:244:19)
at Object.watch (node:fs:2247:34)
at NodeWatcher.watchdir (node_modules/sane/src/node_watcher.js:159:22)
at Walker.<anonymous> (node_modules/sane/src/common.js:109:31)
at Walker.emit (node:events:394:28)
at node_modules/walker/lib/walker.js:69:16
at go$readdir$cb (/node_modules/graceful-fs/graceful-fs.js:195:14)
at FSReqCallback.oncomplete (node:fs:188:23) {
errno: -28,
syscall: 'watch',
code: 'ENOSPC',
path: 'node_modules/metro/node_modules/@babel/plugin-transform-unicode-regex/node_modules/@babel/parser/lib',
filename: 'node_modules/metro/node_modules/@babel/plugin-transform-unicode-regex/node_modules/@babel/parser/lib'
}

FAILURE: Build failed with an exception.

解法:
修改系統設定,在 /etc/sysctl.conf 加入一行
sudo vi /etc/sysctl.conf
fs.inotify.max_user_watches=524288

參考資料

2. Expecting android:banner with the application tag

因為我的專案要在TV上運行所以有加入leanback,在建置時被lint要求要加上banner

解法:

(1) 加入了一張大小為320 x 180圖檔 ic_banner.png放置在android/app/src/main/res/drawable-xhdpi

(2) 在AndroidManifest.xml的application部份多加一個屬性 android:banner="@drawable/ic_banner"

Expecting android:banner with the <application> tag or each Leanback launcher activity

    android/app/src/main/AndroidManifest.xml:9: Error: Expecting android:banner with the <application> tag or each Leanback launcher activity [MissingTvBanner]

3. AndroidManifest.xml:1: Error: Hardware feature android.hardware.touchscreen not explicitly marked as optional

與上個lint的問題都是TV上運行所加入了leanback才會有的錯誤,我這裡因為不需要touchscreen所以就設為false

解法:

只要在AndroidManifest.xml的頂層manifest內加入uses-feature即可

<uses-feature android:name="android.hardware.touchscreen" android:required="false" />

    android/app/src/main/AndroidManifest.xml:1: Error: Hardware feature android.hardware.touchscreen not explicitly marked as optional  [ImpliedTouchscreenHardware]

      <manifest xmlns:android="http://schemas.android.com/apk/res/android"

4. AndroidManifest.xml:1: Error: Expecting <uses-feature android:name="android.software.leanback" android:required="false" />

與上個lint的問題都是TV上運行所加入了leanback才會有的錯誤,因為我是要兼容Mobile和TV所以設為false

解法:

只要在AndroidManifest.xml的頂層manifest內加入uses-feature即可    

<uses-feature android:name="android.software.leanback" android:required="false" />    

    android/app/src/main/AndroidManifest.xml:1: Error: Expecting <uses-feature android:name="android.software.leanback" android:required="false" /> tag [MissingLeanbackSupport]

      <manifest xmlns:android="http://schemas.android.com/apk/res/android"


jest測試的問題:

1. Cannot find module 'react-native/Libraries/Animated/src/NativeAnimatedHelper' 

Cannot find module 'react-native/Libraries/Animated/src/NativeAnimatedHelper' from 'Main-test.js'
63 | describe('the render of Main', () => {
64 | jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter.js');
> 65 | jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');


解法:
從原本的
    jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
改成
    jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');


2. SyntaxError: Cannot use import statement outside a module

先提一下我的專案沒有使用typescript
解法:
在package.json裡面jest部份加上transformIgnorePatterns,並加上專案中使用到的套件:
(1) react-native-code-push
(2) react-native-marquee-ab
(3) react-native-exit-app
(4) react-native-json-tree
其實是RN升級後有遭遇import錯誤的套件就加進transformIgnorePatterns裡面

  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(@react-native|react-native|react-native-code-push|react-native-marquee-ab|react-native-exit-app|react-native-json-tree)/)"
    ]
  }

參考資料:

  • https://github.com/microsoft/react-native-code-push/issues/2050
  • https://github.com/oblador/react-native-vector-icons/issues/1324
  • https://github.com/facebook/react-native/issues/31190

3. Cannot destructure property 'instrument' of 'options' as it is undefined


解法:
跟前面一個一樣加上transformIgnorePatterns就沒問題了

4. react-test-renderer要和新的react版本匹配

因為react是17.0.2所以就升級到react-test-renderer@17.0.2,另外順帶升級@testing-library/react-native@7.2

留言