Search code examples
regexreactjscreate-react-app

Create React App Working on Desktop and Android but is Blank on IOS

Update: As Zachary Haber suggested it was a regex problem. There are some symbols that arent supported by old browsers.

I'm using Firebase and react and it working great on Desktop. However, on mobile, there is a white screen. Any suggestions why?

Here is the App: https://land-ified.com

Here is my package json file:

    {
  "name": "leavemailapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "dayjs": "^1.8.24",
    "firebase": "^7.14.4",
    "jwt-decode": "^2.2.0",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-dom": "^16.13.1",
    "react-icons": "^3.10.0",
    "react-modal": "^3.11.2",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "node-sass": "^4.14.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.1%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://land-ified.com/",
  "proxy": "https://europe-west3-leaveyourmail-4c1f1.cloudfunctions.net/api"
}

Thanks!

Solution

  • Regex lookbehind doesn't work in Safari or firefox currently. You'll need to figure out how to re-write your regexes to not use this feature as it will cause your app to fail to load on either of those browsers.

    enter image description here

    https://caniuse.com/#feat=js-regexp-lookbehind

    From UserSettings.js line 26:

    const userReg = /^(?=.{3,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/

    From validators.js line 19:

    export const isUsername = (username) => {
  // 8-20 characters only letter . _ and can start and end in letter No __ .. _. ._
  const regEx = /^(?=.{3,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/
  return username.match(regEx)
}

    As for the regex:

    ^(?=.{3,20}$)([a-zA-Z0-9]+([_.][a-zA-Z0-9]+)*)$ should match everything you were trying to match.

    This uses the concept of unrolling the loop to match one or more alphanumeric characters that are followed by ( an underscore or period that have one or more alphanumeric characters afterwards ) repeated as many times as needed.

    The [_.] acts as the special case for the construct allowing us to remove the rest of your lookaheads (other than the length lookahead) as they are covered by the main pattern instead.

    regex101 with some basic strings to match for testing.