CODEWITHSUNDEEP
javascriptreactjsgatsby
dankondr
dankondr

Reputation: 51

GatsbyJS renders URLs incorrectly

I have my pages in "pages" folder called with lowercase names like this:

pages
├── 404.js
├── faq.js
├── addresses.js
├── service
│   ├── service1.js
│   └── service2.js
└── services.js

Gatsby should give them URLs associated with this lowercase names (like /services for pages/services.js), and it works in development mode, but in deployment mode (using netlify) it doesn't render the page and on reload changes URL to starting with uppercase (like /Services) and then it loads.

The strangest in it is that some pages work (like /faq, which is the exact duplicate of services.js with only function name changed) whilst others don't.

Code of services.js:

import React from "react"
...
function Services() {
  return (...)
}

export default Services

and code of faq.js:

import React from "react"
...
function Faq() {
  return (...)
}

export default Faq

All ... are the same in both files.

All pages are linked through Gatsby Links:

import { Link } from "gatsby"

Looking like this:

...
<div className="footer-column">
    <div className="footer-header">For clients</div>
    <Link to="/services/" className="footer-item"> // Problem one
      Our services
    </Link>
    <Link to="/faq/" className="footer-item"> // Working fine
      Frequently asked questions
    </Link>
</div>
...

Previously I created folder "services" and then renamed it to "service", maybe problem occurs here? But at the same time link to /addresses doesn't work too and there never was a folder called "addresses".

I tried setting up siteUrl in metadata, but it doesn't help.

How can i fix this problem?

Upvotes: 2

Views: 869

Answers (4)

Abhinav M
Abhinav M

Reputation: 41

It has to do with the name of the page files in GitHub, for some reason they change to Capital casing when pushed to remote.

Upvotes: 0

RyanPinPB
RyanPinPB

Reputation: 73

Updated solution: After reading that GitHub has some problems with updating capitalization changes on files (if a file was originally pushed to GitHub as Services.js and later changed to services.js), they recommended deleting the file and creating a new file with the same content and name, but with the capitalization that you prefer for the name of the file. This worked for me.

Old comment:

I'm having a similar problem. You can see this problem in a live example: pearsondigitalmarketing.com by clicking on menu and then seeing how "Services" and "Vision" load.

The site is similar as OP but is built with Gatsby Wordpress Experimental theme.

I'm using a combo of Chakra UI and Gatsby Link's via a Link Component and both Services and Vision pages work in a local build (Gatsby Develop), but since my production build is built on Netlify using my GitHub repository, it's finding a capitalized version of the pages Vision and Services.

This somehow creates a problem for the pages to load initially.

The page loads a blank white screen.

If I refresh that blank page, the page loads as intended, after rerouting the non-capitalized route to the capitalized route (that GitHub and Netlify thinks is correct)

@dankondr also mentioned this.

Has anyone found a solution? I'm thinking I need to figure out why GitHub is capitalizing these two pages on push. Or I need to just deploy to Netlify/host from my local files, instead of using GitHub

Upvotes: 0

dankondr
dankondr

Reputation: 51

I solved this strange problem.

For some reason files named with lowercase on my computer (displaying the same way) were starting with uppercase in git. So if you got it too, check filenames in GitHub or any other git platform you use.

Upvotes: 2

NM Pennypacker
NM Pennypacker

Reputation: 6942

Without seeing any actual code, the easiest way (in my opinion) to link to pages in Gatsby is to:

import Link from 'gatsby-link'

and then:

<Link to="/the-path-you-want-to-link-to">
  your link text
</Link>

As long as you have a siteUrl configured in your gatsby-config.js file, your link paths will be appended to it and the links should work. You can always hard-code them with an <a> tag as well.

The siteUrl key goes in siteMetadata in gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
    siteUrl: `https://your-production-url.com`

  },
  ...
}

Upvotes: 2

Related Questions