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

[lindboe]

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
• [x] 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

[CortneyOfstad]

Thanks for the update @tgolen! In regards to the ETA, are we still on track?

[CortneyOfstad]

Hi @tgolen — just following up on the comment here to see where we're at. Thanks!

[tgolen]

The Web-E PR has been deployed to production, so this should be all fixed and I'll close it.