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:
- Open JS console in browser
- Create a new manual request (did not reproduce for smartscan)
- 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)
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)
Daily Update
Next Steps
ETA
yes please