Gatsby: Gatsby Link Absolute urls

[rotexhawk]

Description

Gatsby's built-in link component doesn't handle absolute urls. It changes
https://www.example.com to /https:/www.example.com/. I looked into the gatsby-link package and noticed the following troublesome functions. First the path is prefixed with / and afterwards it's run through normalized function which I think has a bug.

I am not sure if gatsby-link was the right place to look because I changed the functions and added console.log which showed the right url but the href tag in html didn't change.

function withPrefix(path) {
    return normalizePath(__PATH_PREFIX__ + '/' + path);
}
// this regex also catches `//`, and replaces it with `/`, which is probably a bug. 
function normalizePath(path) {
    return path.replace(/\/+/g, '/');
}

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

System:
OS: macOS 10.14.2
CPU: (4) x64 Intel(R) Core(TM) i5-4670 CPU @ 3.40GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.12.0 - ~/.nvm/versions/node/v10.12.0/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.8.0 - ~/.nvm/versions/node/v10.12.0/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 72.0.3626.121
Safari: 12.0.2
npmPackages:
gatsby: ^2.1.27 => 2.1.27
gatsby-awesome-pagination: ^0.3.4 => 0.3.4
gatsby-cli: ^2.4.14 => 2.4.14
gatsby-image: ^2.0.31 => 2.0.31
gatsby-plugin-google-analytics: ^2.0.16 => 2.0.16
gatsby-plugin-google-fonts: 0.0.4 => 0.0.4
gatsby-plugin-guess-js: ^1.0.4 => 1.0.4
gatsby-plugin-manifest: ^2.0.22 => 2.0.22
gatsby-plugin-netlify-cache: ^1.1.0 => 1.1.0
gatsby-plugin-prefetch-google-fonts: ^1.4.0 => 1.4.0
gatsby-plugin-react-helmet: ^3.0.8 => 3.0.8
gatsby-plugin-root-import: ^2.0.5 => 2.0.5
gatsby-plugin-sass: ^2.0.10 => 2.0.10
gatsby-plugin-sharp: ^2.0.25 => 2.0.25
gatsby-plugin-styled-components: ^3.0.6 => 3.0.6
gatsby-source-filesystem: ^2.0.23 => 2.0.23
gatsby-source-wordpress: ^3.0.43 => 3.0.43
gatsby-transformer-sharp: ^2.1.15 => 2.1.15

[sidharthachatterjee]

As documented in https://www.gatsbyjs.org/docs/gatsby-link/#reminder-use-link-only-for-internal-links gatsby-link is meant to be used only for internal links. You can use a normal anchor tag for external links. 🙂

[rotexhawk]

I understand that but these are internal links too. I dont see a reason why it shouldn't work for absolute URLs.

[rotexhawk]

To expand on this a little more; Most content management systems return absolute urls in the data, which makes sense. They are still internal link and Gatsby Link should handle them.

[pieh]

If those are internal links then you could format it to not include domain as well.

You have much more context on structure of your links than Gatsby could have. Gatsby also doesn't care on what domain it's hosted - so those links might work in some cases (when published on www.example.com), but not in other cases (f.e. when developing locally).

[rotexhawk]

I feel like we are ignoring the issue with Link here and instead finding workarounds. I understand that the links won't work locally but I don't care about that. That will be the issue regardless of the Link component.

I believe Link should handle absolute urls or if you guys decide to not support that, it should at least be documented, internal links !== absolute links and it's confusing to say the least.