2

My React app works in Chrome and Edge, but renders a blank screen in Safari with the error: Invalid regular expression: invalid group specifier name

I thought it was an issue with dependencies, and tried to use brute force create a fresh app and install dependencies one by one to pinpoint the issue, but that did not work.

Here are the dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
    "bootstrap": "^4.5.3",
    "emailjs-com": "^2.6.4",
    "firebase": "^8.2.7",
    "firebase-admin": "^9.5.0",
    "formik": "^2.2.6",
    "react": "^17.0.1",
    "react-beautiful-dnd": "^13.0.0",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-file-viewer": "^1.2.1",
    "react-loading-skeleton": "^2.1.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.1",
    "react-to-print": "^2.12.2",
    "react-transition-group": "^4.4.1",
    "redocx": "^1.1.4",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.1",
    "styled-components": "^5.2.1",
    "use-before-unload": "^1.0.1",
    "uuid": "^8.3.1",
    "web-vitals": "^0.2.4",
    "yup": "^0.32.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "node-sass": "^4.14.1",
    "sass-loader": "^10.1.0"
  }

I also tried searching for regular expressions in my code, specifically lookaheads and lookbehinds '(?' but did not find any.

Any ideas?

GABE
  • 21
  • 2

3 Answers3

1

I found the solution by click on syntax error coming in the console, Check the file error is coming probably from vendor-min.js > There you will find an error and the library name as culprit I found image-to-base64 library is what not working for me. I commented out and checked and it worked

This Was Error I found after clicking

2.14a00c79.chunk.js:2 SyntaxError: Invalid regular expression: unrecognized character after (?(anonymous function) @ 2.14a00c79.chunk.js:2 wb.swiper-init.js:1 SyntaxError: Unexpected token '<'(anonymous function) @ wb.swiper-init.js:1

Please feel free to communicate Happy to solve your errors

himanshu rawat
  • 11
  • 1
0

I got the same error in production build of create-react-app project. It was difficult to locate the error, as the code is bundled and minified. My approach was to get the development build running on safari. I can then easily locate the regex. It turns out, I shipped an unsupported regex pattern of safari.

artidataio
  • 316
  • 4
  • 8
0

I only received the SyntaxError: Invalid regular expression: invalid group specifier name error in my react application's production build. The error also only occurred in Safari/Mobile Safari.

I was using react-router: ^6.8. Bumping to the latest version of react-router (in my case, 6.14.1) solved my issue.

aboutaaron
  • 4,869
  • 3
  • 36
  • 30