RangeError: Invalid string length

[vinvijdev]

Description

Getting "RangeError: Invalid string length" after react-native version upgrade to 0.78 while executing test cases.

` RangeError: Invalid string length

  at printObjectProperties (node_modules/pretty-format/build/collections.js:170:47)
  at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
  at printer (node_modules/pretty-format/build/index.js:325:10)
  at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)`

Test case :

Screen :

`export type RegistrationFormData = {
email: string
password: string
confirmPassword: string
firstName: string
dateOfBirth: string
}

export type RegistrationFormDataKeys = keyof RegistrationFormData

export type RegistrationFormScreenProps = {
onHeaderPressClose: () => void
afterRegister: (regToken: string, firstName: string) => void
}

export const RegistrationFormScreen: React.FC = ({
onHeaderPressClose,
afterRegister,
}) => {
const { t } = useTranslation()
const [loading, setLoading] = useState(false)

const dispatch = useDispatch()

const { buildTestId } = useTestIdBuilder()
const form = useForm({
shouldFocusError: false,
resolver: zodResolver(
z
.object({
email: EMAIL_SCHEMA(t, true),
password: z.string().trim().min(1),
confirmPassword: z.string().trim().min(1),
firstName: z.string().optional(),
dateOfBirth: DATE_SCHEMA(t).optional(),
})
.refine(data => data.password === data.confirmPassword, {
path: ['confirmPassword'],
message: t('form_error_different_from_password'),
}),
),
})

useFocusErrors(form)
const { setErrors } = useValidationErrors(form)

const onSubmit = form.handleSubmit(async data => {
setLoading(true)
try {
const accountsRegisterResponse = await dispatch(register(data)).unwrap()
afterRegister(accountsRegisterResponse.regToken, accountsRegisterResponse.profile.firstName)
form.reset()
} catch (error: unknown) {
if (error instanceof CdcStatusValidationError) {
setErrors(error)
} else if (error instanceof ErrorWithCode) {
ErrorAlertManager.current?.showError(error)
} else {
logger.warn('account register error cannot be interpreted', JSON.stringify(error))
ErrorAlertManager.current?.showError(new UnknownError('Register'))
}
} finally {
setLoading(false)
}
})

return (
<ModalScreen whiteBottom testID={buildTestId('registration_form')}>

<ModalScreenHeader
titleI18nKey="registration_form_headline"
testID={buildTestId('registration_form_headline')}
onPressClose={onHeaderPressClose}
/>

<FormFieldWithControl
name={'email'}
component={TextFormField}
labelI18nKey="registration_form_email"
testID={buildTestId('registration_form_email')}
control={form.control}
autoCapitalize="none"
autoComplete="email"
autoCorrect={false}
keyboardType="email-address"
isRequired
disableAccessibilityForLabel
textContentType="username"
/>
<FormFieldWithControl
name={'password'}
component={PasswordFormField}
labelI18nKey="registration_form_password"
testID={buildTestId('registration_form_password')}
control={form.control}
isRequired
disableAccessibilityForLabel
textContentType="password"
registrationScenario
/>
<FormFieldWithControl
name={'confirmPassword'}
component={PasswordFormField}
labelI18nKey="registration_form_confirmPassword"
testID={buildTestId('registration_form_confirmPassword')}
control={form.control}
isRequired
disableAccessibilityForLabel
textContentType={Platform.OS === 'ios' ? 'oneTimeCode' : 'newPassword'}
registrationScenario
/>
<FormFieldWithControl
name={'firstName'}
component={TextFormField}
labelI18nKey="registration_form_firstName"
testID={buildTestId('registration_form_firstName')}
control={form.control}
disableAccessibilityForLabel
/>
<FormFieldWithControl
name={'dateOfBirth'}
component={DateFormField}
labelI18nKey="registration_form_dateOfBirth"
testID={buildTestId('registration_form_dateOfBirth')}
control={form.control}
disableAccessibilityForLabel
displayMandatoryFieldHint
/>


<Button
disabled={!form.formState.isDirty}
testID={buildTestId('registration_form_submit')}
i18nKey="registration_form_submit"
onPress={onSubmit}
/>


)
}
`

Steps to reproduce

Run test case

React Native Version

0.78.0

Affected Platforms

Build - MacOS

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.3.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 80.89 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.13.0
    path: ~/.asdf/installs/nodejs/18.13.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.asdf/installs/nodejs/18.13.0/bin/yarn
  npm:
    version: 8.19.3
    path: ~/.asdf/plugins/nodejs/shims/npm
  Watchman:
    version: 2024.05.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/I583816/.gem/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "28"
      - "30"
      - "31"
      - "32"
      - "33"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 28.0.3
      - 29.0.2
      - 30.0.3
      - 31.0.0
      - 32.0.0
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
      - 34.0.0
      - 34.0.0
      - 35.0.0
    System Images:
      - android-29 | Google Play ARM 64 v8a
      - android-30 | Google APIs ARM 64 v8a
      - android-31 | Google APIs ARM 64 v8a
      - android-31 | Google Play ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.11005911
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /Users/I583816/Library/Java/JavaVirtualMachines/corretto-17.0.9/Contents/Home/bin/javac
  Ruby:
    version: 3.1.1
    path: /Users/I583816/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.0
    wanted: 0.78.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

RangeError: Invalid string length

      at printObjectProperties (node_modules/pretty-format/build/collections.js:170:47)
      at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
      at printer (node_modules/pretty-format/build/index.js:325:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
      at printer (node_modules/pretty-format/build/index.js:325:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)
      at printComplexValue (node_modules/pretty-format/build/index.js:255:50)
      at printer (node_modules/pretty-format/build/index.js:325:10)
      at printListItems (node_modules/pretty-format/build/collections.js:142:19)
      at printComplexValue (node_modules/pretty-format/build/index.js:210:45)
      at printer (node_modules/pretty-format/build/index.js:325:10)
      at printObjectProperties (node_modules/pretty-format/build/collections.js:169:21)

Reproducer

Please check this repo - https://github.com/vinvijdev/IssueReproducer
Run - yarn test src/screens/account/registration/registration-form-screen.test

Screenshots and Videos

No response

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[cipolleschi]

Please provide a valid, minimal, reproducer using this template.

[vinvijdev]

Please check this repo - https://github.com/vinvijdev/IssueReproducer

Run - yarn test src/screens/account/registration/registration-form-screen.test

[kelvinkioko]

@vinvijdev any luck? I am also experiencing the same issue.

Upgraded from 0.75 to 0.78

[vinvijdev]

@vinvijdev any luck? I am also experiencing the same issue.

Upgraded from 0.75 to 0.78

Nothing till now. Same for me. Issue happening after upgrade to 0.78

[vinvijdev]

Hi @cipolleschi Can you help here with what's going wrong?

[cipolleschi]

from the stacktrace, that's a recursion in pretty-format. Make sure to update the dependency or to pin to the version you were using before.
This is not a react-native issue and we can provide support on this kind of issues.

[JoaoMosmann]

@vinvijdev @kelvinkioko I'm facing the same issue. Did you manage to fix it?