App: [LOW] [Splits] [$500] Console warning: Invalid prop supplied to LHNOptionsList

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!


Version Number: 1.4.14-0 Reproducible in staging?: no Reproducible in production?: no If this was caught during regression testing, add the test name, ID and link from TestRail: n/a Email or phone of affected tester (no customers): lizzi@infinitered.com Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by:@lindboe Slack conversation:

Action Performed:

  1. Open JS console in browser
  2. Create a new manual request (did not reproduce for smartscan)
  3. After creating the request, look at JS console

Expected Result:

No console warnings.

Actual Result:

Console logs a warning:

OnyxUpdates.ts:81 Warning: Failed prop type: Invalid prop `transactions.transactions_6234463839666864617.receipt` of type `array` supplied to `LHNOptionsList`, expected `object`.
    at LHNOptionsList (webpack-internal:///./src/components/LHNOptionsList/LHNOptionsList.js:108:20)
    at withOnyx (webpack-internal:///./node_modules/react-native-onyx/dist/web.development.js:2621:9)
    at withCurrentReportID(Component)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:52:25)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:52:25)
    at SidebarLinks (webpack-internal:///./src/pages/home/sidebar/SidebarLinks.js:93:26)
    at div
    at eval (webpack-internal:///./node_modules/react-native-web/dist/exports/View/index.js:52:25)
    at SidebarLinksData (webpack-internal:///./src/pages/home/sidebar/SidebarLinksData.js:85:24)
    at withOnyx (webpack-internal:///./node_modules/react-native-onyx/dist/web.development.js:2621:9)
    at withNetwork(Component)
    at WithNavigationFocus (webpack-internal:///./src/components/withNavigationFocus.tsx:16:91)
    at withCurrentReportID(Component)

I also noticed that the error eventually solves itself. If you log what the LHNOptionsList component is receiving, like this:


function LHNOptionsList({
...
}) {
    console.log("🍊 receipts: ", Object.values(transactions).map(item => item.receipt));
    const styles = useThemeStyles();

You’ll see the problem array in the list with a bunch of objects.

If you reload the app, you’ll see the error recur, but then the surprising bit: after LHNOptionsList re-renders a few times (visible each time the added console.log statement prints again), eventually the empty array turns into an empty object and the problem goes away.

Workaround:

Can the user still use Expensify without this being fixed? Yes, this is not noticeable to an end user.

Platforms:

Which of our officially supported platforms is this issue occurring on?

  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop

Screenshots/Videos

Video was too large for GitHub, Google drive link: https://drive.google.com/file/d/16yOTJ1n8jQHe0xyjr0Mt9mfBytWGHMw-/view?usp=drive_link (happy to host somewhere else if needed)

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~0167764be02a30eae1
  • Upwork Job ID: 1744424255094456320
  • Last Price Increase: 2024-01-15

About this issue

  • Original URL
  • State: closed
  • Created 6 months ago
  • Comments: 53 (29 by maintainers)

Most upvoted comments

Daily Update

  • I was able to locate where in the code the problem was happening
  • I’ve created a PR to fix it

Next Steps

  • Get PR reviewed/merged/deployed

ETA

  • Reviewed and merged Monday Mar 11
  • Deployed to staging Mar 12

I’ll be happy to point you to the exact lines of code where the data flows through before it gets to the warning, if that’s what you expect.

yes please