2 months ago
hello, i deployed an app @web and it works on every devices exepts on ios < 26. I dont know what happen but it shows me a white page.
tsconfig:
{
// "extends": "project/config/tsconfig.base.json",
"compilerOptions": {
"target": "es2019",
"module": "esnext",
"moduleResolution": "bundler",
"moduleDetection": "force",
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"types": ["vite/client", "node", "@types/google.maps"],
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["**/*.ts", "**/*.tsx", ".intlayer/**/*.ts"],
"exclude": ["node_modules"]
}
vite config:
import tailwindcss from "@tailwindcss/vite";
import { tanstackRouter } from "@tanstack/router-plugin/vite";
import viteReact from "@vitejs/plugin-react";
import path from "path";
import { defineConfig } from "vite";
import { intlayer, intlayerCompiler } from "vite-intlayer";
export default defineConfig(({ command }) => {
const plugins = [
tailwindcss(),
intlayer(),
intlayerCompiler(),
tanstackRouter({
target: "react",
autoCodeSplitting: true,
}),
viteReact(),
];
return {
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
base: "/",
server: {
host: "0.0.0.0",
allowedHosts: true,
},
build: {
modulePreload: {
polyfill: true,
},
target: "es2015",
cssTarget: "safari13",
sourcemap: false,
minify: "esbuild",
},
preview: {
allowedHosts: true,
host: "0.0.0.0",
},
plugins,
};
});
my tanstack routes tree whitiin the screenshotIf any more info required, pls tell me, i'll send you
thanks gm !
Attachments
6 Replies
Status changed to Awaiting Railway Response Railway • 2 months ago
2 months ago
Just to clarify, did you mean iOS < 16 and not iOS < 26?
If so, this sounds like older iOS Safari failing before React mounts, which usually results in a blank white page.
A few targeted things to try:
- Use Safari Remote DevTools on an affected iPhone/iPad and temporarily enable
build.sourcemap: trueso you can capture the actual runtime error. - Add
@vitejs/plugin-legacy.build.target: "es2015"alone does not always cover older Safari compatibility issues. - Audit dependencies for unsupported features on older iOS Safari, such as
ResizeObserver,BigInt,globalThis, or untranspiled modern syntax. - As an isolation test, temporarily disable TanStack Router
autoCodeSplittingin case chunk loading is what’s breaking on older Safari.
This is most likely a frontend runtime/browser compatibility issue, not a Railway deployment issue.
If you can share the exact iOS version and the Safari console error, that’ll probably pinpoint the dependency or feature causing the blank page.
2 months ago
Hello , your vite build.target "es2015" only downgrades syntax, it doesn't inject polyfills for missing browser apis on older ios, add @vitejs/plugin-legacy to your vite config.
install it with npm i -D @vitejs/plugin-legacy terser, then add legacy({ targets: ["iOS >= 13"] }) to your plugins array
2 months ago
hello guys,
i'll provide you more informations about my bug :
the white page is for ios < 18
I set up the legacy({ targets: ["iOS >= 13", "Safari >= 13"] }) and it doesn't fixed it.
export default defineConfig(({ command }) => {
const plugins = [
tailwindcss(),
intlayer(),
intlayerCompiler(),
legacy({ targets: ["iOS >= 13", "Safari >= 13"] }),
tanstackRouter({
target: "react",
}),
viteReact(),
];
return {
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
base: "/",
plugins,
};
});i don't have ios so i'm emulating a 17.5 iOS mobile on xcode.
2 months ago
OKai it was not a railway issue thats mb, it was an API compatibility error about Cookie Store API for iOS < 18. You can close this subject :).
thanks everyone
spinboxx
hello guys, i'll provide you more informations about my bug : the white page is for ios < 18 I set up the legacy({ targets: \["iOS >= 13", "Safari >= 13"\] }) and it doesn't fixed it. ```typescript export default defineConfig(({ command }) => { const plugins = [ tailwindcss(), intlayer(), intlayerCompiler(), legacy({ targets: ["iOS >= 13", "Safari >= 13"] }), tanstackRouter({ target: "react", }), viteReact(), ]; return { resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, base: "/", plugins, }; }); ``` i don't have ios so i'm emulating a 17.5 iOS mobile on xcode.
2 months ago
Classic dependency hell 🙂 At least you found the real cause. Also, for quick checks, desktop browser dev tools have mobile emulation now, though Xcode/iOS Simulator is still better when you need to catch Safari-specific API issues like this
