I’m developing a React application using Vite, and I'm facing an issue where the app displays a white blank screen only on iOS devices. But it works perfectly on Android devices and desktop browsers. I’ve checked it using Chrome Inspect on my iPhone, and the console shows “Vite connecting” and “Vite connected” but the screen remains blank.Please check the attached package.json and vite.config.js for reference. Any help or advice would be greatly appreciated!
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
bluwy
commented
1 month ago
Describe the bug
I’m developing a React application using Vite, and I'm facing an issue where the app displays a white blank screen only on iOS devices. But it works perfectly on Android devices and desktop browsers. I’ve checked it using Chrome Inspect on my iPhone, and the console shows “Vite connecting” and “Vite connected” but the screen remains blank.Please check the attached package.json and vite.config.js for reference. Any help or advice would be greatly appreciated!
package.json
{ "name": "my-app", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "lint:check": "NODE_OPTIONS='--max-old-space-size=4096' eslint . --ext=js,jsx --no-color", "lint:fix": "NODE_OPTIONS='--max-old-space-size=4096' eslint . --ext=js,jsx --fix", "audit:fix": "npm audit fix", "prettier:check": "prettier --check "src//.{js,jsx}"", "prettier:fix": "prettier --write "src//.{js,jsx}"" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-regular-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", "@hookform/resolvers": "^3.1.0", "@reduxjs/toolkit": "^1.9.5", "@tanstack/react-query": "^4.29.5", "@tanstack/react-query-devtools": "^4.29.5", "axios": "^1.3.6", "bootstrap": "^5.1.3", "classnames": "^2.3.2", "country-state-city": "^3.1.4", "lodash": "^4.17.21", "moment": "^2.29.4", "prop-types": "^15.8.1", "react": "^18.2.0", "react-bootstrap": "^2.7.4", "react-currency-input-field": "^3.6.11", "react-date-picker": "^10.5.2", "react-datepicker": "^4.11.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", "react-google-autocomplete": "^2.7.3", "react-hook-form": "^7.43.9", "react-redux": "^8.1.2", "react-router-dom": "^6.10.0", "react-select": "^5.7.2", "react-signature-canvas": "^1.0.6", "react-slick": "^0.29.0", "react-switch": "^7.0.0", "react-table": "^7.8.0", "react-time-picker": "^6.5.2", "react-toastify": "^9.1.2", "react-webcam": "^7.1.1", "redux-persist": "^6.0.0", "slick-carousel": "^1.8.1", "socket.io-client": "^4.7.1", "yup": "^1.1.1" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@babel/eslint-parser": "^7.21.3", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^4.0.0-beta.0", "autoprefixer": "^10.4.14", "eslint": "^8.38.0", "eslint-config-prettier": "^8.8.0", "eslint-import-resolver-alias": "^1.1.2", "eslint-plugin-extra-rules": "^0.0.0-development", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jest": "^27.2.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-lodash": "^7.4.0", "eslint-plugin-no-inline-styles": "^1.0.5", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.3.4", "prettier": "^2.8.8", "pretty-quick": "^3.1.3", "sass": "^1.62.0", "vite": "^4.3.0", "vite-plugin-eslint": "^1.8.1" } } { "name": "my-app", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "lint:check": "NODE_OPTIONS='--max-old-space-size=4096' eslint . --ext=js,jsx --no-color", "lint:fix": "NODE_OPTIONS='--max-old-space-size=4096' eslint . --ext=js,jsx --fix", "audit:fix": "npm audit fix", "prettier:check": "prettier --check "src//.{js,jsx}"", "prettier:fix": "prettier --write "src//.{js,jsx}"" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-regular-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", "@hookform/resolvers": "^3.1.0", "@reduxjs/toolkit": "^1.9.5", "@tanstack/react-query": "^4.29.5", "@tanstack/react-query-devtools": "^4.29.5", "axios": "^1.3.6", "bootstrap": "^5.1.3", "classnames": "^2.3.2", "country-state-city": "^3.1.4", "lodash": "^4.17.21", "moment": "^2.29.4", "prop-types": "^15.8.1", "react": "^18.2.0", "react-bootstrap": "^2.7.4", "react-currency-input-field": "^3.6.11", "react-date-picker": "^10.5.2", "react-datepicker": "^4.11.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", "react-google-autocomplete": "^2.7.3", "react-hook-form": "^7.43.9", "react-redux": "^8.1.2", "react-router-dom": "^6.10.0", "react-select": "^5.7.2", "react-signature-canvas": "^1.0.6", "react-slick": "^0.29.0", "react-switch": "^7.0.0", "react-table": "^7.8.0", "react-time-picker": "^6.5.2", "react-toastify": "^9.1.2", "react-webcam": "^7.1.1", "redux-persist": "^6.0.0", "slick-carousel": "^1.8.1", "socket.io-client": "^4.7.1", "yup": "^1.1.1" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@babel/eslint-parser": "^7.21.3", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@vitejs/plugin-react": "^4.0.0-beta.0", "autoprefixer": "^10.4.14", "eslint": "^8.38.0", "eslint-config-prettier": "^8.8.0", "eslint-import-resolver-alias": "^1.1.2", "eslint-plugin-extra-rules": "^0.0.0-development", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.27.5", "eslint-plugin-jest": "^27.2.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-lodash": "^7.4.0", "eslint-plugin-no-inline-styles": "^1.0.5", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.3.4", "prettier": "^2.8.8", "pretty-quick": "^3.1.3", "sass": "^1.62.0", "vite": "^4.3.0", "vite-plugin-eslint": "^1.8.1" } }
Reproduction
https://dev-alpha.nefamily4me.com/registration
Steps to reproduce
No response
System Info
Used Package Manager
npm
Logs
No response
Validations