Date fields causing Minified React error #31 in Forge UI Kit apps?

Several of our Forge UI Kit apps began receiving “Minified React error #31” errors yesterday after loading. Some of these apps haven’t changed in months, and were known to be working fine earlier yesterday but stopped sometime in our afternoon. What is especially strange is that sometimes some can load fine for several seconds and then error without interaction.

In all cases so far, it has been tied to a Jira Start Date or Due Date (duedate) field. While in the console log the typeof comes back as string (expected as “YYYY-MM-DD” format), the react error message though, comes back like Objects are not valid as a React child (found: Thu Apr 27 2023 20:00:00 GMT-0400 (Eastern Daylight Time)). If you meant to render a collection of children, use an array instead.

When I try to use any JavaScript Date functions on it within the code, it errors (because it is not a Date). When I make a new Date with it and then manually format a string out of it, using like getFullYear()+“-”+…etc. I still get the minified error. The only thing that I have found so far to get it working again is to append a blank space to the date, (i.e., (" ")+(issue.fields.duedate)).

Was there a change that we need to accommodate for? Is there a known issue related to this? Any information/insight would be greatly appreciate!

2 Likes

Hi @DavidPezet1,

Just to confirm, is the field using the DatePicker component? Do you have a code snippet of where you are using the date value where the React error originates from?

@PeterYu Thank you for reaching out! I boiled it down to the following. In the process I also found that it seems to only happen while in a Table/Row/Cell in case that helps narrow anything down. I left it using the search endpoint, because that is what I’ve been using, even though this simplified version is only getting one issue. Just update the issue key in the JQL string in line 36. You can also uncomment/comment sections of the return to quickly see in/out of a table. This is in a UI Kit Confluence Macro module. Let me know if any additional info is needed.

import api, { route } from '@forge/api'
import ForgeUI, { Cell, Fragment, Macro, render, Row, Table, Text, useState } from '@forge/ui'

const getJQLIssues = async (JQL) => {
  var JQLbodyData = `{
    "expand": [
      "names",
      "fields"
    ],
    "jql": "`+ JQL + `",
    "maxResults": 100,
    "fieldsByKeys": false,
    "fields": ["summary","assignee","duedate","issuetype","status","customfield_10015"],
    "startAt": 0
  }`
  //console.log(`JQLbodyData: ${JQLbodyData}`)

  var response = await api.asApp().requestJira(route`/rest/api/2/search`, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JQLbodyData
  })
  //console.log(await response.text())

  var data = await response.json()

  return data
}

const App = () => {

  // !!!! UPDATE ISSUE KEY !!!
  let [JQLResults] = useState(async () => await getJQLIssues("key = ABC-1234 "))
  let jiraIssue = JQLResults.issues?.[0]
  console.log(`jiraIssue: ${JSON.stringify(jiraIssue)}`)

  console.log(`
    jiraIssue.fields.customfield_10015: ${typeof jiraIssue.fields.customfield_10015} ${jiraIssue.fields.customfield_10015} //Start Date (Date Picker) -- Locked Custom Field
    jiraIssue.fields.duedate: ${typeof jiraIssue.fields.duedate} ${jiraIssue.fields.duedate} //Due Date (Date Picker) -- System Field
  `)

  return (
    <Fragment>
      {/* <Text>{jiraIssue.fields.duedate}</Text>
      <Text>{jiraIssue.fields.customfield_10015}</Text> */}
      <Table>
        <Row><Cell><Text>{jiraIssue.fields.customfield_10015}</Text></Cell></Row>
        <Row><Cell><Text>{jiraIssue.fields.duedate}</Text></Cell></Row>
      </Table>
    </Fragment>
  )
}

export const run = render(
  <Macro
    app={<App />}
  />
)

I found the same error yesterday on Confluence Macro module and Text UI kit component, and applied the same workaround (to append a blank space to the date) :sweat_smile:

In my case, I could reproduce by the constant string (e.g. “2023-04-26”). It looked like strange behaivior… By clicking the title of a page, the error happened.

2 Likes

Looks like I can replicate the error with the raw string as well (as @hirota.takayuki mentioned), i.e. <Text>2023-04-30</Text>.

It is indeed very strange behaviour :thinking:. It doesn’t seem to affect Jira apps, just Confluence, so it may be a change to Confluence that is causing this rather than a change to Forge. I will try to follow up on it for you.

2 Likes

Thank you @PeterYu ! And thank you @hirota.takayuki for clearing up some of my own confusion! After trying again, I was also able to reproduce this with a simple string, I must have tried that outside of a table originally. Both of the following produce the error. Thank you both again!

return <Table><Row><Cell><Text>{"2023-04-27"}</Text></Cell></Row></Table>
return <Table><Row><Cell><Text>2023-04-27</Text></Cell></Row></Table>

1 Like

Hi Team,

We’ve rolled out a fix to this which resolves the issue of having a date like

<Text>2023-04-28</Text>

as well as with the <DatePicker/>

<Form onSubmit={onSubmit}>
    <DatePicker name="datePicker" defaultValue="2023-04-28" label="datePicker"/>
</Form>

James.

3 Likes

Thank you @jrichards ! Are there any other related info / special cases we should be aware of?

Hi @DavidPezet1,

Not that I know of. This specific issue has been resolved now. If you something else, then please log an ECOHELP ticket for us to investigate.

Thanks,
James.