Sapper Svelte Routes not working and Pages missing when Deployed to Netlify

Question

I have seen others ask this question but no other answers seem to help.

I have a basic svelte / sapper application that has a Nav Bar component.

Locally, the navbar and website functions perfectly, however, when deploying to netlify ( and using npm run dev and __sapper__/export ), I get a few issues...

1. First issue is that my ChartJS charts won't load. Maybe that is for another question, but might be relevant

2. When clicking on a nav link, the url changes to the proper URL within my browser, but the page does not load. However, after clicking a nav link and seeing the URl appear in the browser search bar, I can just reloading the page and the desired page will load( but again, without any chartJS charts ), but, it adds a "/" to the end of the route ( which it doesn't do locally ).

3. When trying to visit a route not in the navbar, I get a "Page not found" error, despite it appearing locally.

I have deployed a sapper site before, using the same commands, but for some reason, this site will not work.

The only relevant code would be my _layout.svelte which holds my NavBar, so it appears across all screens. Similar to the default layout in something like Vue I believe.

    import Nav from '../components/Nav.svelte';

<style>

</style>

<Nav/>
<main>
    <slot></slot>
</main>

I can't seem to find any fixes, at least ones that have worked for me.

What is very confusing to me is why one of my routes gives the "page not found" error, despite the route existing. Why would ONLY that route not appear on netlify, and not other routes I directly route to from the Browser Search bar.

Thank you in advance for any advice.

Answer 1

The sapper export scripts works by starting at an entry point (usually index.svelte) and "clicking" on all visible links to crawl like that to all the pages. It will render each page it visited as a separate .html file, which can be served directly by your host (Netlify in this case).

What this means is that each that is not directly accessible by clicking on a displayed link will not be exported, this causes some o your problems:

404 page / Other pages

I suppose you do not link directly to your 404 page do you ? :) You can tell sapper to start at several end points by specifying them in your export command

"export": "sapper export --entry "/ /404"",

Since it only clicks displayed links there are also 2 other common problems

• buttons that act as links
• links hidden behind a button (hamburger menus for instance)

Solving the first one is easy: if it's a link it should be a link, don't use buttons for links, you can always style your link to look like a button

(this one might not apply to you, because it seems your pages are exported, just adding if for future readers) The second one is a bit more work, but it usually is solved by adding an invisible list of links available in your navigation somewhere in your markup.

<nav>
  {#if navigationOpen}
    <a href="">...</a>
  {/if}
  <div style="visibility: hidden; position: absolute">
    <a href="">...</a>
  </div>
</nav>

In the example above I duplicated the menu in a hidden section, this can be picked up by sapper, personally I keep it with the nav, so I don't forget to change links when I change the nav, but you could as well put this div on your index page. (An alternative is to have visible links to each section on your landing page!)

ChartJS not loading

I think this might be another question, what you can do is export locally and check if your ChartJs script is correctly copied from the statics folder. Also check if the path to the script is correct, it is best to prepend all paths to static files with a / in the template to ensure the browser looks for them from the root url.

<!-- on page myhost.com/page/blob -->
<!-- points to myhost.com/page/blob/library.js -->
<script src="library.js"></script>
<!-- points to myhost.com/library.js -->
<script src="/library.js"></script>

Not navigating

I have not heard of or seen this before, but it might be related to the previous points, you can always export locally and serve the site locally to see if it's not a configuration issue on netlify ?