Downside
I’ve a TypeScript React utility constructed with Vite and an Specific.js backend that works completely on:
- Home windows (all browsers)
- Android (all browsers)
- macOS (all browsers)
Nevertheless, when testing on actual iPhone units with iOS, the applying reveals solely a clean white web page.
Tech Stack
- Frontend: React with TypeScript, constructed with Vite
- Backend: Specific.js API
- Deployment: Nginx reverse proxy
- Browser testing: Examined on Safari, Chrome, Firefox on iOS – all present white web page
What I’ve Tried
- Checked browser console on iPhone Safari – no apparent JavaScript errors
- Utility hundreds advantageous in desktop Safari
- All API endpoints reply accurately when examined instantly
- Static property (CSS, JS) appear to load primarily based on community tab
Questions
- What are widespread causes of iOS-specific clean web page points in React apps?
- Are there particular TypeScript/Vite configurations that may trigger iOS compatibility points?
- How can I successfully debug this difficulty on iOS units?
- Are there recognized Safari/WebKit limitations with fashionable JavaScript which may have an effect on my app?
Further Context
The app makes use of fashionable JavaScript options and TypeScript. I think it may be associated to:
- JavaScript compatibility points with iOS Safari
- Vite construct configuration issues
- Potential polyfill necessities for iOS
Any steering on debugging steps or widespread options could be vastly appreciated.
Construct Configuration
// vite.config.ts fundamental construction
export default defineConfig({
plugins: [react()],
// ... different config
})
Notice: I’m additionally atteching the screenshots on white clean web page difficulty in iPhone (chrom & safarii browsers) right here.
What I attempted:
-
Cross-platform testing: Examined the applying extensively on Home windows (Chrome, Firefox, Edge), Android units (Chrome, Samsung Browser), and macOS (Safari, Chrome, Firefox) – all labored completely with full performance.
-
iOS machine testing: Examined on a number of actual iPhone units (iPhone 12, iPhone 14) operating iOS 16+ utilizing Safari, Chrome, and Firefox browsers.
-
Construct verification: Confirmed that the Vite construct course of completes efficiently with out errors and generates all mandatory property (JS, CSS, HTML information).
-
Community inspection: Used Safari Internet Inspector to verify if static property (JavaScript bundles, CSS information) are loading accurately – they seem to load with 200 standing codes.
-
Console debugging: Opened Safari Developer Instruments on iPhone to verify for JavaScript errors, however discovered no apparent error messages within the console.
-
Direct API testing: Verified that Specific.js backend API endpoints reply accurately when accessed instantly from iPhone Safari.
What I anticipated:
The React TypeScript utility ought to load and performance identically on iOS units because it does on all different platforms, displaying the consumer interface and dealing with consumer interactions correctly.
What really occurred:
As a substitute of the anticipated utility interface, iPhone customers see solely a very clean white web page with no content material, navigation, or interactive components. The web page seems to load (solely reveals loading indicator that I’ve added in index.html file), however renders nothing seen to the consumer. The difficulty is constant throughout all examined iOS browsers and units.