Deployment successful on desktop but not on mobile

Support
,
1

Hey there,

My React.js application that was deployed using Netlify shows up fine on desktop but when I try to preview it on my iPhone (all browsers), nothing shows. I haven’t made it responsive on mobile yet but it should still show something.

My Github repo is found here: GitHub - LesterYiu/habit-rabbit
The live site can be found here: https://rabit-habbit-app.netlify.app/

I have tried the following:

  1. adding “homepage”: “.” to my package.json
  2. adding “proxy”: “http://localhost:3000” to my package.json
  3. adding the following to a netlify.toml file
    [build]
    command = “CI= npm run build”
    publish = “build”

[[redirects]]
from = “/*”
to = “/index.html”
status = 200

  1. I’ve also tried to fix dependency array issues (which shouldn’t cause an issue at all) with no luck at all.

I’m not too sure as to what is happening since it works perfectly fine with no errors in my browser on desktop. Any suggestions to fix this?

image
image1824×860 18.7 KB

This is my current deployment settings.

Here are my last deploy logs:

9:38:19 PM: Waiting for other deploys from your team to complete. Check the queue: Netlify App
9:38:37 PM: build-image version: 4c0c1cadee6a31c9bb8d824514030009c4c05c6a (focal)
9:38:37 PM: build-image tag: v4.15.0
9:38:37 PM: buildbot version: 7f32f5823a1f12cc27aca308d8bb5755d6ed0771
9:38:37 PM: Building without cache
9:38:37 PM: Starting to prepare the repo for build
9:38:37 PM: No cached dependencies found. Cloning fresh repo
9:38:37 PM: git clone GitHub - LesterYiu/habit-rabbit
9:38:37 PM: Preparing Git Reference refs/heads/main
9:38:38 PM: Parsing package.json dependencies
9:38:39 PM: Section completed: initializing
9:38:39 PM: Starting build script
9:38:39 PM: Installing dependencies
9:38:39 PM: Python version set to 2.7
9:38:39 PM: v16.18.1 is already installed.
9:38:40 PM: Now using node v16.18.1 (npm v8.19.2)
9:38:40 PM: Enabling node corepack
9:38:40 PM: Started restoring cached build plugins
9:38:40 PM: Finished restoring cached build plugins
9:38:40 PM: Attempting ruby version 2.7.2, read from environment
9:38:41 PM: Using ruby version 2.7.2
9:38:41 PM: Using PHP version 8.0
9:38:41 PM: No npm workspaces detected
9:38:41 PM: Started restoring cached node modules
9:38:41 PM: Finished restoring cached node modules
9:38:41 PM: Installing NPM modules using NPM version 8.19.2
9:38:46 PM: npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See There’s Math.random(), and then there’s Math.random() · V8 for details.
9:38:46 PM: npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: Array.prototype.sort() - JavaScript | MDN
9:38:46 PM: npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
9:38:47 PM: npm WARN deprecated har-validator@5.1.5: this library is no longer supported
9:38:47 PM: npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
9:39:02 PM: added 1681 packages, and audited 1682 packages in 21s
9:39:02 PM: 221 packages are looking for funding
9:39:02 PM: run npm fund for details
9:39:02 PM: 7 high severity vulnerabilities
9:39:02 PM: To address issues that do not require attention, run:
9:39:02 PM: npm audit fix
9:39:02 PM: To address all issues (including breaking changes), run:
9:39:02 PM: npm audit fix --force
9:39:02 PM: Run npm audit for details.
9:39:02 PM: NPM modules installed
9:39:02 PM: Creating package sha
9:39:02 PM: Started restoring cached go cache
9:39:02 PM: Finished restoring cached go cache
9:39:03 PM: Installing Go version 1.19.3 (requested 1.19.x)
9:39:09 PM: unset GOOS;
9:39:09 PM: unset GOARCH;
9:39:09 PM: export GOROOT=‘/opt/buildhome/.gimme/versions/go1.19.3.linux.amd64’;
9:39:09 PM: export PATH=“/opt/buildhome/.gimme/versions/go1.19.3.linux.amd64/bin:${PATH}”;
9:39:09 PM: go version >&2;
9:39:09 PM: export GIMME_ENV=“/opt/buildhome/.gimme/env/go1.19.3.linux.amd64.env”
9:39:09 PM: go version go1.19.3 linux/amd64
9:39:09 PM: Detected 1 framework(s)
9:39:09 PM: “create-react-app” at version “5.0.1”
9:39:09 PM: Installing missing commands
9:39:09 PM: Verify run directory
9:39:11 PM: ​
9:39:11 PM: ────────────────────────────────────────────────────────────────
9:39:11 PM: Netlify Build
9:39:11 PM: ────────────────────────────────────────────────────────────────
9:39:11 PM: ​
9:39:11 PM: ❯ Version
9:39:11 PM: @netlify/build 28.4.4
9:39:11 PM: ​
9:39:11 PM: ❯ Flags
9:39:11 PM: baseRelDir: true
9:39:11 PM: buildId: 6386c21be9e83c602b9010b0
9:39:11 PM: deployId: 6386c21be9e83c602b9010b2
9:39:11 PM: ​
9:39:11 PM: ❯ Current directory
9:39:11 PM: /opt/build/repo
9:39:11 PM: ​
9:39:11 PM: ❯ Config file
9:39:11 PM: /opt/build/repo/netlify.toml
9:39:11 PM: ​
9:39:11 PM: ❯ Context
9:39:11 PM: production
9:39:11 PM: ​
9:39:11 PM: ────────────────────────────────────────────────────────────────
9:39:11 PM: 1. build.command from netlify.toml
9:39:11 PM: ────────────────────────────────────────────────────────────────
9:39:11 PM: ​
9:39:11 PM: $ CI= npm run build
9:39:11 PM: > habit-rabbit@0.1.0 build
9:39:11 PM: > react-scripts build
9:39:12 PM: Creating an optimized production build…
9:39:33 PM: Compiled with warnings.
9:39:33 PM:
9:39:33 PM: [eslint]
9:39:33 PM: src/components/Home.js
9:39:33 PM: Line 77:8: React Hook useEffect has a missing dependency: ‘navigate’. Either include it or remove the dependency array react-hooks/exhaustive-deps
9:39:33 PM: Line 92:8: React Hook useEffect has missing dependencies: ‘reformattedDoneTask’ and ‘reformattedTask’. Either include them or remove the dependency array react-hooks/exhaustive-deps
9:39:33 PM: Creating deploy upload records
9:39:33 PM: Line 164:11: ‘deleteTask’ is assigned a value but never used no-unused-vars
9:39:33 PM: Line 172:11: ‘deleteDoneTask’ is assigned a value but never used no-unused-vars
9:39:33 PM: Line 230:11: ‘deleteTaskSearchedList’ is assigned a value but never used no-unused-vars
9:39:33 PM: Search for the keywords to learn more about each warning.
9:39:33 PM: To ignore, add // eslint-disable-next-line to the line before.
9:39:33 PM: File sizes after gzip:
9:39:33 PM: Starting post processing
9:39:33 PM: 220.22 kB build/static/js/main.496e10ac.js
9:39:33 PM: 7.28 kB build/static/css/main.104e0d12.css
9:39:33 PM: The project was built assuming it is hosted at /.
9:39:33 PM: Post processing - HTML
9:39:33 PM: You can control this with the homepage field in your package.json.
9:39:33 PM: The build folder is ready to be deployed.
9:39:34 PM: Post processing - header rules
9:39:33 PM: You may serve it with a static server:
9:39:33 PM: npm install -g serve
9:39:33 PM: serve -s build
9:39:34 PM: Post processing - redirect rules
9:39:33 PM: Find out more about deployment here:
9:39:33 PM: Deployment | Create React App
9:39:33 PM: ​
9:39:34 PM: Post processing done
9:39:33 PM: (build.command completed in 22.2s)
9:39:33 PM: ​
9:39:33 PM: ────────────────────────────────────────────────────────────────
9:39:34 PM: Section completed: postprocessing
9:39:33 PM: 2. Deploy site
9:39:33 PM: ────────────────────────────────────────────────────────────────
9:39:33 PM: ​
9:39:33 PM: Starting to deploy site from ‘build’
9:39:33 PM: Creating deploy tree
9:39:33 PM: 0 new files to upload
9:39:33 PM: 0 new functions to upload
9:39:33 PM: Section completed: deploying
9:39:33 PM: Site deploy was successfully initiated
9:39:33 PM: ​
9:39:33 PM: (Deploy site completed in 201ms)
9:39:33 PM: ​
9:39:33 PM: ────────────────────────────────────────────────────────────────
9:39:33 PM: Netlify Build Complete
9:39:33 PM: ────────────────────────────────────────────────────────────────
9:39:33 PM: ​
9:39:33 PM: (Netlify Build completed in 22.5s)
9:39:34 PM: Caching artifacts
9:39:34 PM: Started saving node modules
9:39:34 PM: Finished saving node modules
9:39:34 PM: Started saving build plugins
9:39:34 PM: Finished saving build plugins
9:39:34 PM: Started saving pip cache
9:39:34 PM: Finished saving pip cache
9:39:34 PM: Started saving emacs cask dependencies
9:39:34 PM: Finished saving emacs cask dependencies
9:39:34 PM: Started saving maven dependencies
9:39:34 PM: Finished saving maven dependencies
9:39:34 PM: Started saving boot dependencies
9:39:34 PM: Finished saving boot dependencies
9:39:34 PM: Started saving rust rustup cache
9:39:34 PM: Finished saving rust rustup cache
9:39:34 PM: Started saving go dependencies
9:39:34 PM: Finished saving go dependencies
9:39:34 PM: Build script success
9:39:34 PM: Section completed: building
9:39:35 PM: Uploading Cache of size 124.4MB
9:39:36 PM: Section completed: cleanup
9:39:36 PM: Finished processing build request in 59.110728532s
9:39:36 PM: Site is live :sparkles:

2

Hi @LesterYiu,

Thanks for reaching out and welcome to Netlify’s Support Forum!

I was able to reproduce the issue of the page showing up blank on iPhone and also on Desktop Safari. The site is working in Chrome, Firefox and Edge. So I don’t believe the issue is with Netlify.

I did find a Stackoverflow post with a similar issue here that has an answer. This Netlify post also has some info. Do either post assist with the issue?

1 Like
3

Hey Melvin,

Thank you for the swift response. I have already looked into commenting out my regex but the only regex I have in my code is “new Regexp” which is supported in Safari I believe. I do have some libraries like Lodash and date-fns I’ve used on this project but they seem to work on other projects with no issues. I’m not too sure as to what is causing this issue.

4

Hi @LesterYiu,

Looking in (desktop) Safari, in the Console, I see:

screenshot1

screenshot2
screenshot21920×389 186 KB

Searching the for the error with lodash, I did find this Stackoverflow post that may help:

5

Hey @Melvin ,

Thank you again for taking the time to look through the console logs for Safari. I appreciate it as I do not have a Mac to test on. I just looked at the link you provided and I believe it doesn’t apply in this case since I don’t utilize lookbehind regular expressions in my code. Here is the only code that utilizes Regex on my page. Which I believe Safari has full support for according to google. (All my regex is found in the Home.js component if you’re curious). I’ve looked more into Lodash but it doesn’t seem that it is the cause for that console error.

image
image1067×474 34.5 KB

Do you have any input as to what may be causing this issue? Thank you again for taking the time to look through my errors :slight_smile:

6

Update: Upon playing around with my code, I realized it was Lodash. It seems that one of the Lodash methods I used used lookbehind regular expressions which isn’t supported in Safari. I will have to refactor my code. Thank you so much for all your help :)) I was struggling for hours trying to figure it out haha

7

Thanks so much for coming back and letting us know! Happy building :rocket: