使用dayjs时React Native项目保存即崩溃问题求助

问题描述 #

我遇到一个诡异的问题：在React Native项目中使用dayjs时，保存代码会直接导致应用崩溃，修改内容无法同步到模拟器，Hermes引擎立即抛出错误，崩溃位置指向最后保存的模块。

但手动重载应用（调试窗口按r）后，应用能正常加载；如果移除当前文件中所有dayjs引用再保存，哪怕其他组件还在用dayjs，应用也能正常渲染。怀疑问题和Watchman有关。

触发崩溃的代码示例 #

import dayjs from 'dayjs';
import {Text} from '@ui-kitten/components';

// 其他导入省略

const DashboardScreen = () => {
  return (
    <DefaultLayout containerStyle={localStyles.containerStyle}>
      <Text style={localStyles.title} category="h6">
        {dayjs().format('MMMM, YYYY')}
      </Text>
    </DefaultLayout>
  );
};

注：Text组件来自UI Kitten组件库

错误日志 #

ERROR  TypeError: Cannot convert undefined value to object

This error is located at:
    in DownloadBtn (created by ReportDownload)
    in RCTView (created by View)
    in View (created by ReportDownload)
    in RCTView (created by View)
    in View (created by ReportDownload)
    in RCTView (created by View)
    in View (created by Card)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by TouchableOpacity)
    in TouchableOpacity (created by TouchableOpacity)
    in TouchableOpacity (created by TouchableWithoutFeedback)
    in TouchableWithoutFeedback (created by TouchableWeb)
    in TouchableWeb (created by Card)
    in Card
    in Wrapper (created by Card)
    in WrappingElement (created by WidgetCard)
    in WidgetCard (created by ReportDownload)
    in ReportDownload (created by DashboardScreen)
    in RCTView (created by View)
    in View (created by Layout)
    in Layout
    in Wrapper (created by Layout)
    in WrappingElement (created by DefaultLayout)
    in RCTView (created by View)
    in View (created by DefaultLayout)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by DefaultLayout)
    in TouchableWithoutFeedback (created by DefaultLayout)
    in RCTView (created by View)
    in View (created by KeyboardAvoidingView)
    in KeyboardAvoidingView (created by DefaultLayout)
    in RCTView (created by View)
    in View (created by DefaultLayout)
    in DefaultLayout (created by DashboardScreen)
    in DashboardScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by SetupStackScreen)
    in SetupStackScreen (created by RootRouter)
    in RootRouter (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in Suspense (created by App)
    in RCTView (created by View)
    in View (created by ModalPanel)
    in ModalPanel (created by ApplicationProvider)
    in ThemeProvider (created by StyleProvider)
    in MappingProvider (created by StyleProvider)
    in StyleProvider (created by ApplicationProvider)
    in ApplicationProvider (created by App)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by App)
    in Provider (created by App)
    in App (created by RootApp)
    in ReactNativeProfiler (created by RootApp)
    in RCTView (created by View)
    in View (created by __Sentry.TouchEventBoundary)
    in __Sentry.TouchEventBoundary (created by RootApp)
    in RootApp
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in MyApp(RootComponent), js engine: hermes

模拟器截图显示，崩溃行号与DashboardScreen中dayjs代码的行号完全一致。

环境信息 #

• React Native 0.70.8
• dayjs 1.11.7
• 非Expo项目

可能的原因及解决尝试 #

1. Watchman缓存异常
   你的怀疑方向是对的，Watchman的文件监听缓存可能紊乱。执行以下命令重置Watchman：

   watchman watch-del-all && watchman shutdown-server
   

   之后重启Metro服务器和模拟器。

2. dayjs热更新时的模块加载问题
   React Native的Fast Refresh机制对部分第三方库的兼容性不佳。可以尝试：

   • 用useMemo包裹dayjs的格式化逻辑，避免热更新时重复执行引发异常：

     import { useMemo } from 'react';
     // ...
     const formattedDate = useMemo(() => dayjs().format('MMMM, YYYY'), []);
     

     组件中直接使用{formattedDate}即可。
   • 若使用了dayjs的本地化或其他插件，确保在项目入口文件全局导入，避免组件内重复导入导致热更新冲突。

3. Hermes引擎字节码缓存问题
   Hermes缓存可能与热更新代码不兼容，尝试清除缓存：

   • iOS：删除ios/build文件夹，重新执行pod install
   • Android：删除android/app/build文件夹，重新编译项目

4. UI Kitten与dayjs的热更新冲突
   不排除UI Kitten的Text组件与dayjs渲染结果在热更新时交互异常。可以临时替换为React Native原生Text组件测试，确认是否还会崩溃。

内容的提问来源于stack exchange，提问作者Electric Coffee