signavio / react-mentions

@mention people in a textarea
https://react-mentions.vercel.app
Other
2.4k stars 560 forks source link

Uncaught TypeError: Cannot read properties of undefined (reading 'markup') #730

Open petrikkachur opened 5 months ago

petrikkachur commented 5 months ago

Steps to reproduce:

Cannot reproduce it. Only happens in production.

Expected behaviour:

Observed behaviour: I can see a list of mentions when I start typing "@" but choosing the mention, it does not choose it. When running in dev mode, it works as expected, no issues. In console log, I see:

framework-f44ba79936f400b5.js:8 Uncaught TypeError: Cannot read properties of undefined (reading 'markup')
    at er (3930-365a33fe589c8347.js:54:85560)
    at el (3930-365a33fe589c8347.js:54:86928)
    at Object.onSelect (3930-365a33fe589c8347.js:54:122729)
    at l.select (3930-365a33fe589c8347.js:54:109349)
    at onClick (3930-365a33fe589c8347.js:54:111058)
    at Object.eY (framework-f44ba79936f400b5.js:8:16096)
    at e1 (framework-f44ba79936f400b5.js:8:16250)
    at framework-f44ba79936f400b5.js:8:34229
    at ra (framework-f44ba79936f400b5.js:8:34328)
    at ro (framework-f44ba79936f400b5.js:8:34742)
    at framework-f44ba79936f400b5.js:8:40405
    at ej (framework-f44ba79936f400b5.js:8:115827)
    at framework-f44ba79936f400b5.js:8:36207
    at rd (framework-f44ba79936f400b5.js:8:36237)
    at tq (framework-f44ba79936f400b5.js:8:23886)
    at tQ (framework-f44ba79936f400b5.js:8:23115)
    at t.unstable_runWithPriority (framework-f44ba79936f400b5.js:22:9732)
    at lp (framework-f44ba79936f400b5.js:8:44577)
    at eA (framework-f44ba79936f400b5.js:8:115569)
    at tW (framework-f44ba79936f400b5.js:8:22906)

Tech Stack:

react-mentions": "^4.4.10" "react": "^17.0.2", "react-dom": "^17.0.2" "next-js": "12.3.4" My code:

    <MentionsInput
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder={'Add a comment or mention with @'}
            >
              <Mention
                data={(teamMembers || []).map(member => {
                  const item = { id: member.id, display: member.name };
                  return item;
                })}
                trigger="@"
              />
            </MentionsInput>
image