[Bug] Internet explorer does not load routes

[BrendonSled]

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!

1. Use react-static template typescript (I'm sure others work)
2. Add IE compatibility

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

3. npm start

Expected Behavior

Routes to load fine

[SleeplessByte]

Which IE version exactly?

…

On 2020-01-11 20:11, Brendon Sled wrote: 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 Run and copy the result of: npx envinfo --system --npmPackages react* --binaries --npmGlobalPackages react* --browsers here: 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 -- You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub [1], or unsubscribe [2]. Links: ------ [1] #1361?email_source=notifications&email_token=AAO7SWGDLWGUIE7HXQGOX5DQ5IKXDA5CNFSM4KFTQNZKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4IFQ6WVA [2] https://github.com/notifications/unsubscribe-auth/AAO7SWBGI77G7ROVEAIV3MDQ5IKXDANCNFSM4KFTQNZA

[BrendonSled]

IE 11

[SleeplessByte]

Hmm. I don't know. I know we don't really support IE at all (because it takes too much time to give support for), but it could well be that we've inadvertently broken this. If you figure out why it's failing, that's great.

The first place I would look at is check if Promise is actually polyfilled, because those API's use promises.

[BrendonSled]

Everything is polyfilled. I've made a sort of work around for now.

<Routes
    render={({ routePath, getComponentForPath }) => {
        // The routePath is used to retrieve the component for that path
        const element = getComponentForPath(routePath);
        if (!element) {
            return (
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/realestate" exact component={RealEstate} />
                    <Route path="/insurance" exact component={Insurance} />
                    <Route path="/accounting" exact component={Accounting} />
                    <Route path="/contactus" exact component={ContactUs} />
                    <Route component={is404} />
                </Switch>
            );
        }
        return element;
    }}
/>

If I use dynamic routes it works fine (unless one of the pages use RouteData then it will fail to load)

getComponentForPath will always return false for IE.

[Sut3kh]

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>.

[BrendonSled]

Thank you!
For those using core-js you can use this:

export default () => ({
    webpack: (config, { stage }) => {
        config.entry = [
            'babel-polyfill',
            'core-js/web/url',
            ...(Array.isArray(config.entry) ? config.entry : [config.entry]),
        ];
        return config;
    },
});

[SleeplessByte]

Great workarounds!

Can that be added to the guide?

[BrendonSled]

Definitely, I'll push a PR.

[BrendonSled]

PR is here: #1461