Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Retrocompatibility for Webapp

$
0
0

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


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>