I just created an app with fastify, that in a specific route returns the builded version of an Svelte website (built with rollup)
It worked perfectly on my machine and phone, but when I went to show it to my customer and he tried opening it on his very old phone (Galaxy J7 Prime), it only showed up a white screen
Now I'm trying to fix it, but I can't know when it's fixed cuz I don't want to be bothering him to check his phone. So here's what I tried:
First I added babel and postcss to my rollup:
import livereload from 'rollup-plugin-livereload'import resolve from '@rollup/plugin-node-resolve'import commonjs from '@rollup/plugin-commonjs'import replace from '@rollup/plugin-replace'import postcss from 'rollup-plugin-postcss'import terser from '@rollup/plugin-terser'import svelte from 'rollup-plugin-svelte'import babel from '@rollup/plugin-babel'import autoprefixer from 'autoprefixer'import { config } from 'dotenv'const to_replace = {}for (let [k, v] of Object.entries(config().parsed)) to_replace[`process.env.${k}`] = `'${v}'`const production = process.env.NODE_ENV == 'production'export default { input: 'web/main.js', output: { sourcemap: true, format: 'esm', dir: 'public/build' }, plugins: [ replace({ include: ['web/**/*.js', 'web/**/*.ts', 'web/**/*.svelte'], preventAssignment: true, values: to_replace }), svelte({ compilerOptions: { dev: !production }, onwarn: (warning, handler) => { if (warning.code === 'a12y-autofocus') return handler(warning) } }), postcss({ plugins: [autoprefixer()], sourceMap: true }), resolve({ preferBuiltins: true, browser: true, dedupe: ['svelte'], exportConditions: ['svelte'] }), commonjs(), babel({ babelHelpers: 'bundled', presets: [['@babel/preset-env', { targets: '> 1.25%, not dead, ie 11' }]], extensions: ['.js', '.html', '.svelte'] }), !production && livereload('public'), production && terser() ], watch: { clearScreen: false }}
And then I searched for some emulator for old browsersI found this website
https://www.browserling.com/browse/win10/chrome60/https%3A%2F%2Fv-menu.onrender.com%2Fs%2Fcardapio%2Fadeildo-lanches
which really helped me, I noticed that the problem is for Chrome 60 or lower. I also noticed that in the Inspect "Network" tab for old versions it only showed up the fetch for the HTML, but nothing for CSS or JS
When I was about to check into the website files to see if my JS was there it showed a pop-up that I reached my limit for Free-Plan :(
So, that's all info I have, problem is with Chrome 60 or lower, it APPARENTLY only fetches the HTML and I dont know how much babel helped cuz I dont know which versions of Chrome were breaking my site before it