gatsby: URL with unicode characters will not load in MS Edge

Description

If a URL contains a unicode character (for example foo.com/bår) Gatsby will not render the page correctly in Microsoft Edge.

Steps to reproduce

Easiest way to do this:

Use the Gatsby + Netlify CMS starter
Change one of the existing markdown files to have a special character in the file name
Build and serve the site

Or just clone this repo, build and serve. The bug is displayed when accessing http://localhost:8000/blog/2016-12-17-making-sense-of-the-scaas-new-flavor-wheél/

Expected result

The page should load if accessed either directly, or via a link.

Actual result

In MS Edge, navigation to the page results in a white screen. On refresh, the content flickers then disappears again. There are no console errors. Worth noting that <div id="___gatsby"> is empty.

bug

Firefox and Chrome work correctly.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

  System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 69.0
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.13.31 => 2.15.11 
    gatsby-image: ^2.0.23 => 2.2.17 
    gatsby-plugin-netlify: ^2.0.6 => 2.1.11 
    gatsby-plugin-netlify-cms: ^4.1.6 => 4.1.13 
    gatsby-plugin-purgecss: ^4.0.0 => 4.0.1 
    gatsby-plugin-react-helmet: ^3.0.4 => 3.1.6 
    gatsby-plugin-sass: ^2.0.7 => 2.1.13 
    gatsby-plugin-sharp: ^2.2.9 => 2.2.20 
    gatsby-remark-copy-linked-files: ^2.0.7 => 2.1.17 
    gatsby-remark-images: ^3.1.6 => 3.1.20 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.3 
    gatsby-source-filesystem: ^2.0.26 => 2.1.21 
    gatsby-transformer-remark: ^2.6.9 => 2.6.21 
    gatsby-transformer-sharp: ^2.1.9 => 2.2.13

NB: I’m able to test on Edge via a VM, but can confirm that the issue exists for a deployed site accessed by a MS Edge user on a Windows machine.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 22 (7 by maintainers)

Most upvoted comments

@davegreig @j218 the issue on @reach/router has been fixed, just update your yarn.lock to use @reach/router@1.3.3

This fixes the issue for me 🎉

ardeois on Jun 1, 2020

This issue has not been resolved.

ccchapman on Nov 10, 2019

This bug is not limited to the netlify starter. See also: https://github.com/roadwig/gatsby-site If you build and serve this site, you will see that /påge-2 works in other browsers but not MS Edge

davegreig on Oct 30, 2019

Going to to test something and i’ll report back

jonniebigodes on Sep 12, 2019

Can confirm this solves my issue. Thanks for the help!

davegreig on Jun 2, 2020

@roadwig i’ve just removed it, i’m going to leave in the question label.

jonniebigodes on Oct 1, 2019

Hi @jonniebigodes, thanks for having a look so quickly. At first I thought it the bug was simply MS Edge being incapable of handling unicode characters in a URL, but that doesn’t seem to be the case. I can navigate to something like http://example.com/føo in Edge and the URL will resolve correctly.

I found that a similar issue occurs with Gatsby Link components - if the to prop contains some special characters, then the link would not work in MS Edge (again, it’s fine in Firefox, Chrome and even IE11 😱). In this case, I can wrap the value of the to prop with encodeURI and the link will work in Edge. I’m hoping for a similar fix for users that either land directly on the page, or if they should refresh the page.

Avoiding unicode characters in the slugs might be difficult for my use case - the site is intended for a non-English audience and we would want our slugs to be meaningful for SEO reasons.

davegreig on Sep 12, 2019