Netlify app changes URL when a link is clicked, but takes a second click to actually load the page

Support
1

So I built a gridsome app using vue.js, and when I developed it locally, everything worked exactly as I needed it.

I then run gridsome build and upload the resulting dist folder to Netlify, and deploy the app. The app works as it should, except that when you click on a link at the top, it loads the URL and favicon in the URL bar, but doesn’t load the page. It requires a second click to actually load the page. See here: https://65bbaea1b3ac8a15c757b9c4--juliandouglas.netlify.app/

I have looked at various answers, and some of them pointed to:

  • changing v-if to v-show
  • fixing erroneous HTML

I have tried both of these, and I can’t find any HTML that would break the site.

Here is a link to my repo: GitHub - julian-douglas/portfolio-site which includes the dist folder.

Any help would be greatly appreciated!

I tried changing the v-if to v-show, but still faced the same issue.

I looked at this: javascript - Gridsome project hosted on netlify. On click, pages dont load even though the URL does update - Stack Overflow - regarding hydration issues: I also tried scouring my files for erroneous HTML but couldn’t find any.

2

@juliandouglas This behavior isn’t actually Netlify specific, just something odd with your output.

You can reproduce it locally by running npm run build && npx serve -s dist to create your build output then host it with serve.

If you inspect your dist folder after build you’ll see that it does actually contain multiple .html files, e.g. /about/index.html

As far as I can tell, without digging in too deeply, what you’re seeing with the “it needs to be clicked twice” bug is that for the first click your application JavaScript is handling the click and attempting to show the page in an SPA (Single Page Application) fashion.

It retrieves these routes but otherwise the page doesn’t visually change:

image
image952×116 48.3 KB

When the same menu item is then selected again for whatever reason it actually requests the route from the server, going to /about/ and resolving to /about/index.html which as you would expect does “change the page”.

image
image952×365 138 KB

Why it’s happening would be down to application specific logic, but being able to see it locally should help you debug it much faster.

3

Hi @nathanmartin , thank you very much for your reply!

I ran pm run build && npx serve -s dist and it generated the dist file. When I go into it and load a random html file (say cv/index.html), when I click any of the navbar links, it takes me to the corresponding page straightaway. There are no issues. And the console does not say anything either.

I can’t recreate the issue, so not sure how to debug.

Maybe I misunderstood ‘host it with serve’. This is very new to me!

How do you think I could resolve my issue?

4

@juliandouglas I’ll pull your repository fresh, run it again and report what I see shortly.

Update: I’m still seeing exactly the same behavior.

Your repository contains a dist folder (more on that below).
I see the issue even when simply hosting that pre-existing output.

serve

This is an npm package that lets you serve a static site, you can read about it on the page I linked:
https://www.npmjs.com/package/serve

When you say you ran it but then didn’t encounter the issue, did you visit the URL provided by serve? (or did you accidentally visit the gridsome development url?)

For example, if I pull your repository down into a clean folder, and simply run:
npx serve -s dist

It shows:

image

When I then visit http://localhost:3000 in my browser to see your site, the issue occurs.

If I use your Develop command (npm run develop, which is gridsome develop) I see:

image

When I visit http://localhost:8080 in my browser I do not see the issue, but that’s to be expected, since the issue is something concerning the Build output, and gridsome develop and gridsome build are not identical.

dist folder

This is unrelated to your issue, but your repository contains a dist folder.

It’s unnecessary if you’re going to have Netlify perform a build each time you commit code changes.
When your build runs your entire dist folder gets destroyed and recreated from the source.

You can test this by adding a new file to the dist folder, then running npm run build and you’ll find that the file is gone.

Often a .gitignore file would be used to ignore dist/ so the build output files don’t end up in your repository.

5

Hi @nathanmartin ,

Thanks very much for your fast reply. When I ran npx serve -s dist, I am seeing the issue. However, nothing is showing up in the console when I try to access another link. I am stuck on how to resolve my issue.

Is this maybe better asked somewhere else? As you said, the issue comes from the gridsome build, however I do not see a support centre for them anywhere.

6

@juliandouglas Excellent, I’m glad you’ve been able to replicate locally following the instructions.

I don’t believe I said anything did.

My own screenshots aren’t of the Console, they’re the Network tab, showing the requests being made by the page.

There is nothing appearing in the Console because there is no error occurring and you presumably don’t have any console.log’s in your code.

Checking the code of your layouts/Default.vue I can see those links are composed with:

<g-link to="/"><li class="nav__link">Home</li></g-link>
<g-link to="/about/"><li class="nav__link">About</li></g-link>
<g-link to="/cv/"><li class="nav__link">CV</li></g-link>
<g-link to="/portfolio/"><li class="nav__link">Portfolio</li></g-link>
<g-link to="/contact/"><li class="nav__link">Contact</li></g-link>

So it’s highly likely your issue is with the behavior of g-link, you should investigate down that path.

If you can’t self-debug or determine based on the pointers given here, then yes.

If you cannot get Gridsome specific support from them, your best bet would be somewhere more generic, perhaps Stack Overflow.