Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] Internet explorer does not load routes

See original GitHub issue

Bug

Internet explorer with compatibility found in the guide does not work. Static routes will show a 404 and when using things like useRouteData or withRouteDate the site will never load. There are also no console.error messages so I’m not sure where the issues lies.

Environment


  System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 6.76 GB / 15.93 GB
  Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    react: ^16.9.0 => 16.12.0
    react-dom: ^16.9.0 => 16.12.0
    react-hot-loader: ^4.12.11 => 4.12.18
    react-static: ^7.2.0 => 7.2.3
    react-static-plugin-reach-router: ^7.2.0 => 7.2.3
    react-static-plugin-sitemap: ^7.2.0 => 7.2.3
    react-static-plugin-source-filesystem: ^7.2.0 => 7.2.3
    react-static-plugin-typescript: ^7.2.0 => 7.2.3
    babel-polyfill: "^6.26.0",

Steps to Reproduce the problem

Base your steps off of any freshly installed react-static template!

Use react-static template typescript (I’m sure others work)
Add IE compatibility

    webpack: (config, { stage }) => {
        config.entry = [
            'babel-polyfill',
            ...(Array.isArray(config.entry) ? config.entry : [config.entry]),
        ];
        return config;
    },

npm start

Expected Behavior

Routes to load fine

Issue Analytics

State:
Created 4 years ago
Comments:9 (8 by maintainers)

Top GitHub Comments

1reaction

BrendonSledcommented, Jun 23, 2020

Definitely, I’ll push a PR.

1reaction

Sut3khcommented, Jun 23, 2020

We were having a similar problem in IE11 - except for us, all of our static routes would 404 for CSR.

After a very long time debugging I was finally able to locate the problem here which was swallowing the errors thrown in IE on every single href (because it does not support the URL constructor):

try {
    link = new URL(path, location.href)
  } catch (e) {
    // Return false on invalid URLs
    return false
  }

For anyone else that hits this the quick fix is to add https://polyfill.io/v3/polyfill.min.js?features=URL to your <head>.

Top Results From Across the Web

08: Why don't routes work from IE to other browsers? - PolicyPak

For some customers, some Internet Explorer settings set or un-set are interfering with PolicyPak Browser Router's IE plug in.

browser settings do not allow redirecting to a new URL

Method 2: Enable the Meta Refresh option in Security settings. a. Open Internet Explorer-> Click Tools. b.

Angular 12 Routing Issues with IE 11 - Stack Overflow

However, for some reason routing doesn't seem to be working anywhere within the app on IE 11. We are using the latest version...

External navigation not work in internet explorer after ... - GitHub

I have an Internet Explorer issue. After canceling a route navigation with canDeactivate guard, because of pending changes, it is not ...

Firefox and other browsers can't load websites - Mozilla Support

If no web browsers on your computer can load websites, it indicates a problem with your Internet connection. The article describes some troubleshooting ......