Uncaught TypeError: Cannot read properties of undefined (reading 'replace') when using MentionsInput on initial render

[marklin49]

When I load the initial page in React with react-mentions, I get the following error in the console before typing anything:

Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
    at escapeRegex2 (react-mentions.js?v=b3c1ecc9:1470:14)
    at markupToRegex2 (react-mentions.js?v=b3c1ecc9:1660:23)
    at react-mentions.js?v=b3c1ecc9:1670:61
    at Array.map (<anonymous>)
    at readConfigFromChildren2 (react-mentions.js?v=b3c1ecc9:1666:51)
    at MentionsInput2.getPlainText (react-mentions.js?v=b3c1ecc9:2715:52)
    at MentionsInput2.getInputProps (react-mentions.js?v=b3c1ecc9:2616:22)
    at MentionsInput2.renderControl (react-mentions.js?v=b3c1ecc9:2636:30)
    at MentionsInput2.render (react-mentions.js?v=b3c1ecc9:3114:34)
    at react-stack-bottom-frame (react-dom_client.js?v=3ee33408:17434:29)

Steps to Reproduce:

1. Create a simple React component using react-mentions.
2. Provide a static list of users.
3. Render the component on the initial page load.
4. Observe the console error before interacting with the input.

Code Example:

import axios from "axios"
import React, { useState } from "react"
import { Mention, MentionsInput } from "react-mentions"
import { Textarea } from "../ui/textarea"

export function ContentEditor() {
  const [value, setValue] = useState("")

  const users = [
    { id: "isaac", display: "Isaac Newton" },
    { id: "sam", display: "Sam Victor" },
    { id: "emma", display: "[email protected]" },
  ]

  return (
    <div className="pb-6">
      <MentionsInput
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Mention any Github user by typing @ followed by at least one char"
      >
        <Mention trigger="@" data={users} />
      </MentionsInput>
    </div>
  )
}

Expected Behavior: The MentionsInput should render without errors on initial load.

Actual Behavior: The component throws an error on first render before any user interaction.

Environment:

• react-mentions version: 4.4.10
• React version: 19.1
• Browser: Chrome
• OS: Windows 10

Additional Notes:

• The error seems related to escapeRegex2 when parsing the Mention configuration.
• Might be caused by a missing markup or default config in Mention.

[rockcheung2004]

I tried your suggestion to add the markup prop with the default pattern @[__display__](__id__) and it worked again.

[ussaama]

thanks, your suggestion worked.

  return (
    <MentionsInput value={value} onChange={(e) => setValue(e.target.value)}>
      <Mention
        data={users} trigger="@" markup="@[__display__](__id__)"
      />
    </MentionsInput>
  );

[hbmartin]

This is fully fixed (no need for custom markup) in my typescript fork: https://github.com/hbmartin/react-mentions-ts (also added tests for escapeRegex: https://github.com/hbmartin/react-mentions-ts/blob/master/src/utils/escapeRegex.spec.ts )