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

[davegreig]

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:

1. Use the Gatsby + Netlify CMS starter
2. Change one of the existing markdown files to have a special character in the file name
3. 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.

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.

[jonniebigodes]

@roadwig i've been testing it out and it seems that while chrome and firefox are "smart" enough to detect the characters in the url and resolve it, it seems that edge is not. After issuing gatsby develop or gatsby build && gatsby serve and opening up the specific post in edge in windows 10 i'm presented with the following:
.
As a workaround that could play nice for all the browsers you could avoid using special characters in the filename, who will be made into the slugs.

[davegreig]

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.

[wardpeet]

Hi @roadwig!

Thanks for the reproduction, let me see if I can see what's wrong here.

Thanks for using Gatsby! 💜

[jonniebigodes]

Going to to test something and i'll report back

[davegreig]

Did you have any luck @jonniebigodes?
I'm starting to wonder if this is really a @reach/router issue.
This might be unrelated (I'm by no means an expert), but in this sandbox , any route with a special character breaks the rendering...

[jonniebigodes]

@roadwig no sorry but no...i tried a couple of things but no luck. I'm also inclined that it could a issue regarding @reach/router as well.

[davegreig]

Actually, my comment above about @reach/router might not be relevant to this discussion. If the route path is wrapped with encodeURI then routing works. That's the same functionality as the Gatsby Link component (ie the to prop needs to be encoded URI if it has special characters).

So perhaps this is still a Gatsby bug?
In Edge the <div id="___gatsby"> is shown as empty - but that's obviously not the case when you look at the HTML. Is it possibly one of the scripts injected into the HTML by Gatsby?

[davegreig]

Hey @jonniebigodes / @wardpeet - I'm not really sure how the Gatsby team triage issues but just wondering if we should change the label on this issue (it's currently status: awaiting author response), or do you still need further details from me?

[jonniebigodes]

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

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[davegreig]

This bug is still a problem for me. I can't seem to add a not stale label to this issue either.

[davegreig]

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

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[ccchapman]

This issue has not been resolved.

[ardeois]

Hi !

I had the same issue on one of my project, and after some digging, I found that it's related to MS Edge not handling window.location.pathname properly.
Other browsers will url encode this value, but MS Edge doesn't. So this bug could I think be fixed in @reach/router.

See this issue for more details https://github.com/reach/router/issues/343

[j218]

@davegreig @ardeois Did you guys find a workaround this issue??

[ardeois]

@j218 not really, I've opened a PR in reach/router but I'm still waiting for feedback from the contributors.
Meanwhile our site is not working properly on Edge
Feel free to comment on ~https://github.com/reach/router/issues/343~ and ~https://github.com/reach/router/pull/344~

[ardeois]

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

This fixes the issue for me 🎉

[danabrit]

This issue has gone quiet over the last few months. Is anyone still experiencing this issue? If so, could you please give an update with a fuller description? Thank you!

[ardeois]

@danabrit Issue is fixed and could be closed. You could wait for @davegreig to comment though

[davegreig]

Sorry for the delay in my reply. I’ll test the solution tomorrow and update the issue.

[davegreig]

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