[$1000] Dev: Web - Console error on report page

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Refresh Report page
2. Many error shows

Expected Result:

Errors shouldn't be visible.

Actual Result:

Console error on report page

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: Dev
Reproducible in staging?: n/a
Reproducible in production?: n/a
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @aliammar1995
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1688205314450479

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019f8b708de9de6ef3
• Upwork Job ID: 1675889547991613440
• Last Price Increase: 2023-07-03

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[rayane-djouah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Problem1:

The problem we are trying to solve is that the TextLink component is giving a warning that function components cannot be given refs. This warning indicates that there is an issue with how the component is being used and accessed.

Problem2:

accountID type is number but a string is given.

What is the root cause of that problem?

problem1:

The root cause of this problem is that the TextLink component is being used in a way that tries to assign a ref to a function component, which is not allowed in React. This is likely happening because the component is being passed a ref prop or used in a context where a ref is expected.

App/src/components/TextLink.js

Line 33 in c0ece67

function TextLink(props) {

problem2:

App/src/pages/workspace/WorkspaceMembersPage.js

Line 336 in 53e4154

keyForList: item.accountID,

keyForList type should be string.

What changes do you think we should make in order to solve the problem?

problem1:

To fix this issue, we need to modify the TextLink component by using the React.forwardRef() function. This function allows us to create a new component that can receive a ref and pass it down to a child component. By using React.forwardRef(), we can ensure that the ref is correctly handled and accessed without triggering the warning.

Here are the steps to implement the solution:

• Wrap the TextLink component definition with the React.forwardRef() function, like this:

const TextLink = React.forwardRef((props, ref) => {
  // Existing component code...
});

Inside the component, forward the ref to the underlying Text component by assigning it to the ref prop:

<Text
  ref={ref}
  // Other props...
>
  {/* Children content */}
</Text>

problem2:

Convert item.accountID to string type.

keyForList: ${item.accountID}``

What alternative solutions did you explore? (Optional)

N/A

[anmurali]

I don't get all those exceptions on that screenshot. I do get one consistently

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://polyfill.io https://cdn.plaid.com https://www.woopra.com https://assets.onfido.com https://sentry.io https://*.sardine.ai/". Either the 'unsafe-inline' keyword, a hash ('sha256-7g/6t4yA8tsc/QVgz7I0fmfal7nwZsJpx+iM/VqSxYs='), or a nonce ('nonce-...') is required to enable inline execution.

[melvin-bot]

Triggered auto assignment to @bondydaa (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~019f8b708de9de6ef3

[melvin-bot]

Current assignee @anmurali is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mollfpr (External)

[anmurali]

I am not totally sure this is an issue in the UI layer but if it isn't then @mollfpr, will you let me know? And we can take it internal.

[mollfpr]

@anmurali Sure! I will check this in an hour.

[situchan]

This has 2 console warnings and already dupe of #21840 and #21496

[bondydaa]

if console errors were added then the original PRs should be found and commented on and fixed by those authors. we shouldn't spin up new issues for these.

[bondydaa]

okay i'm closing this out as it seems #21840 and #21496 both have PRs in review to fix the console errors.