Why aren't my website's pages loading?

[jd-fillmore]

Description

When I click on a link in the nav, the URL in the address bar changes, but it does not load the page.

This is only happening on Netlify. This does NOT happen on my local machine.

Netlify link.

Note - if you click on a page, and the URL changes to the clicked page, hit refresh. Suddenly, everything works and you can navigate around the site.

Steps to reproduce

Codesandbox link.

1. Click on the Netlify link above
2. Try clicking on one of the main navigation items at the top right
3. Notice how the page doesn't load. But, the URL in the address bar changes.

Expected result

The page that's clicked on should load.

Actual result

It doesn't load. Instead, you're stuck on the home page.

Environment

Libs:
- gridsome version: 0.5.5
- @gridsome/cli version: 0.0.8

Browser:
- All of them

[jfitzsimmons2]

I'm a newbie here but with that said, I think it has to do with your link markup.

<b-nav-item to="/work"><g-link class="nav__link" to="/work">Work</g-link></b-nav-item>

is creating some weird markup on your production site.

Try changing it to:

<g-link class="nav__link" to="/work">Work</g-link>

and see if it works.

[jd-fillmore]

@jfitzsimmons2

I've removed the tag and placed what you had there. Still doesn't work.

The tag is a bootstrap vue component.

Just noticed an error in the console, every time I click on a link:

"Unchecked runtime.lastError: The message port closed before a response was received."

Any idea?

Again - this problem only happens when on Netlify. It doesn't happen on local.

[hjvedvik]

You still have multiple nested a elements in your main menu. Try fix that and see if it works better :)

[jd-fillmore]

@hjvedvik Removed all instances of tags being nested in tags in the main menu, still not working. :(

[hjvedvik]

You can also try to add this element to your Netlify form (ref)

<input type="hidden" name="form-name" value="home-contact" />

Looks like Netlify automatically adds it if it doesn't exists. But it will mess up the Vue rendered markup.

[jd-fillmore]

@hjvedvik I disabled the forms completely and my site works again! So yes, it's probably because Netlify adds those tag. Thanks for that.

[snowmanstudio]

hello. I also facing this issue but my site is on cloudflare pages. How can I solve this in cloudflare pages?