React app runs on Chrome but displays a blankpage on safari

Question

I have a react app that was created with create-react-app. Everything works perfectly on chrome but the app crashes on safari and the following error is in the safari console:

"SyntaxError: Invalid regular expression: invalid group specifier name"

Error message as displayed in console

Line where the error occurs in vendors~main.chunk.js

I am completely unsure of what to do to fix this issue. Any help would be much appreciated. Thank you.

See https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group — The fourth bird, Jun 20 '21 at 08:11
Does this answer your question? [Works in Chrome, but breaks in Safari: Invalid regular expression: invalid group specifier name /(?<=\/)(\[^#\]+)(?=#\*)/](https://stackoverflow.com/questions/51568821/works-in-chrome-but-breaks-in-safari-invalid-regular-expression-invalid-group) — PLPeeters, Jun 21 '21 at 10:42
I also had this same issue when using the `replaceAll()` method. I suspect that when the JavaScript is minified with `npm build`, it could lead to a regular expression that has issues on mobile browsers. — Vicktor, Apr 03 '22 at 11:05

Ryszard Czech · Answer 1 · 2021-06-20T21:47:28.517

Use a capturing group:

const regex = /{([$0-9a-zA-Z_]+)(?=.*})/g
const variable = []
let m;
while (m = regex.exec(segment)) {
  variable.push(m[1])
}

See regex proof.

EXPLANATION

--------------------------------------------------------------------------------
  {                        '{'
--------------------------------------------------------------------------------
  (                        group and capture to \1:
--------------------------------------------------------------------------------
    [$0-9a-zA-Z_]+           any character of: '$', '0' to '9', 'a'
                             to 'z', 'A' to 'Z', '_' (1 or more times
                             (matching the most amount possible))
--------------------------------------------------------------------------------
  )                        end of \1
--------------------------------------------------------------------------------
  (?=                      look ahead to see if there is:
--------------------------------------------------------------------------------
    .*                       any character except \n (0 or more times
                             (matching the most amount possible))
--------------------------------------------------------------------------------
    }                        '}'
--------------------------------------------------------------------------------
  )                        end of look-ahead

React app runs on Chrome but displays a blankpage on safari

1 Answers1