Production build cannot select mention

[SargisPlusPlus]

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:

Uncaught TypeError: Cannot read properties of undefined (reading 'markup')
    at tt (react-mentions.esm.js:98:1)
    at tu (react-mentions.esm.js:267:1)
    at v.addMention (react-mentions.esm.js:1822:1)
    at v.selectFocused (react-mentions.esm.js:1525:1)
    at react-mentions.esm.js:1480:1
    at Object.eA (react-dom.production.min.js:55:313)
    at eq (react-dom.production.min.js:55:465)
    at react-dom.production.min.js:56:34
    at rg (react-dom.production.min.js:56:135)

Tech Stack:

1. react-mentions": "^4.4.7"
2. "react": "^18.2.0",
3. "react-dom": "^18.2.0"
4. "next-js": "12.3.1"

My code:

            <MentionsInput
              style={mentionsInputStyle}
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder={'Add a comment or mention with @'}
              a11ySuggestionsListLabel={'Suggested mentions'}
            >
              <Mention
                data={(teamMembers || []).map(member => {
                  const item = { id: member.id, display: `${member.first_name} ${member.last_name}` };
                  console.log("Mentions - item", item);
                  return item;
                })}
                trigger="@"
                style={mentionStyle}
              />
            </MentionsInput>

I was able to inject a breakpoint right before the issue happens(it breaks on line 103). If you look at the image, I am puzzled why captureGroupOffsets=5. (is this right?) Also, notice that markup, on line 81, is undefined, while it is present in the "config" (this is a single item array with object that has markup).. It is as if it iterates over config multiple times...?

Workaround:

Not sure why but this workaround works

  var captureGroupOffsets = config.map(function (_ref) {
    var markup = _ref.markup;
    var result;

    if (markup !== undefined) {
      result = accOffset;
      accOffset += countPlaceholders(markup) + 1;
      return result;
    }

    return result;
  });

[tballenger]

+1

[claritycodeweb]

+1

[TranLuongNam]

I also have problem like this "react": "18.2.0", "next": "12.3.1", "react-dom": "18.2.0", "react-mentions": "^4.4.10" The issue occur when i click the mention name, see the error like image below

[cyrilzaharchenko]

Same issue here. Any suggestions on how to solve this?

[AayushMathur7]

+1

[petrikkachur]

+1

[sosegon]

Please, see this possible solution.