IE11 do not update page

[PiXy79]

Hi, I'm using this routing library for a specific project that must run even on IE11. Currently it works perfectly on MS Edge but on IE11 the address bar is correctly updated while the page is not changed. It seems that the update on history and in location too it will cause some issue.

Currently I use a very very ugly workaround:

  const ua = window.navigator.userAgent
  const ie11 = ua.indexOf('rv:11.0') !== -1

  if (ie11) { // detect it's IE11
    window.addEventListener("hashchange", (event) => {
      window.location.reload();
    }, false);
  }

that reload the page everytime an hashchange event is triggered.

[pateketrueke]

Interesting, I'll try to investigate the root-cause on a VM if I got some spare time.

So much thanks for your feedback!

[PiXy79]

Thanks, I'm using the default svelte template, with a modified rollup config in order to integrate polyfills and make the application run on IE11:

import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file — better for performance
            css: css => {
                css.write('public/build/bundle.css');
            },
            preprocess: sveltePreprocess({ postcss: true })
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration —
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        resolve({
            browser: true,
            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
        }),
        commonjs(),
        babel({
            extensions: [ '.js', '.mjs', '.html', '.svelte' ],
            runtimeHelpers: true,
            exclude: [ 'node_modules/@babel/**', 'node_modules/core-js/**' ],
            presets: [
                [
                    '@babel/preset-env',
                    {
                        targets: '> 0.25%, ie >= 11, not dead',
                        useBuiltIns: 'usage',
                        corejs: '3.6'
                    }
                ]
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                [
                    '@babel/plugin-transform-runtime',
                    {
                        useESModules: true
                    }
                ]
            ]
        }),

        // In dev mode, call `npm run start` once
        // the bundle has been generated
        !production && serve(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('public'),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

function serve() {
    let started = false;

    return {
        writeBundle() {
            if (!started) {
                started = true;

                require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                    stdio: ['ignore', 'inherit', 'inherit'],
                    shell: true
                });
            }
        }
    };
}

With this configuration, when I run in dev mode I have also an issue on babel, related to Link.svelte or Route.svelte files:

[!] (plugin babel) SyntaxError: /[...]/Link.svelte: Unexpected reserved word 'arguments' (368:2)

  366 |                 $router,
  367 |                 fixedProps,
> 368 |                 arguments,
      |                 ^
  369 |                 window,
  370 |                 parseInt
  371 |         });```

[PiXy79]

I found a similar issue even on vue-router, maybe it can be useful also to fix yrv:

https://github.com/vuejs/vue-router/issues/1849

[pateketrueke]

Hi @PiXy79 how did you managed the polyfills needed by IE11 to run svelte projects?

[pateketrueke]

I did not found a way to test IE11/Edge on CI but I tested it out manually on a local VM, so we finally have IE11 support!

The actual solution is now added on the README.

I just used bublé, e.g.

https://github.com/pateketrueke/yrv/blob/master/rollup.config.js#L39-L42