DEV Community

Svelte + Sapper + Netlify CMS

Aaron Cohen on May 18, 2020

Introduction Hello. In this post, I'll be outlining how to get started with Svelte, Sapper and Netlify CMS. This article assumes some ...

Read full post

JaySwaan • May 21 '20

Great article, a few small errors:

First we'll have to create a new folder within ~/static called admin. Therein we'll create two files, admin.yml and admin.html.

The files should be index.html and config.yml.

And in [slug].json.js the line const { data, content } = grayMatter(post); should be const { data, content } = grayMatter(post).data;

Aaron Cohen • May 23 '20 • Edited

Thanks so much for noting these! I made edits to the post to reflect these corrections 👍

Andrew Wooldridge • Jun 21 '20

That's actually wrong --> this line breaks things :
const { data, content } = grayMatter(post).data;
because grayMatter(post) is returning:
{ content: 'Testing',
data: { slug: 'test', title: 'Test' },
isEmpty: false,
excerpt: '',
orig:
0d 0a 54 65 73 74 69 6e 67> }
so if you tell it to just return greyMatter(post).data then content never gets defined

JaySwaan • Sep 16 '20

Hey Andrew, this is correct. I had a field in my config.yml called content which provided the content for my posts so all the data I needed was inside greyMatter(post).data and I destructured it all out of there. I'm not using the exact same setup so my data (including content) was all inside of data.

Andrew Wooldridge • Jun 21 '20

Hi, I'm getting this issue with the blog posts :

Unexpected token m in JSON at position 0

SyntaxError: Unexpected token m in JSON at position 0

JaySwaan • Sep 16 '20

Hey been awhile since I thought of this post and came back since I was getting the same error randomly after I created a post filtering method that ran in the onMount hook based on which category was selected. Almost pulled all my hair out until I realized it was only rendering JSON for the 2 posts I was showing separately on the front page of my site.

Then it hit me, Sapper only renders routes for links it can follow during export. My post filter (as cool as it is) prevents Sapper from seeing those links during export. I assume this is only an issue with exported sites since all routes worked in dev even before my fix.

My workaround for this was to create an each block and loop through all my posts inside a div that was screen reader only (so it doesn't show on the front end, I also gave them tabindex="-1" just in case so they don't jump into tab order) having this hidden list of links allows Sapper to see them while it's preparing the export and make a route and the accompanying JSON file. Still it's a shit error message especially considering what it really means is that there was no route or JSON at all.

Brad Mehder • Apr 1 '21

I am sure glad that this "hit you", because I don't have a lot of hair to pull out. :-)

I was so confused that some blog posts (the ones where the title and slug matched) were not getting an error, and other posts (where slug and title did not match) were showing a 500 error.

Thanks for your help!

Dosney • Dec 24 '20

Hi, thnx for your elaborate explaination, it very insightfull for a beginner like me. Do you have a code snippet for this proposed solution ? I can't figured it out. Whatever I do it keeps spitting the same error.

JaySwaan • Dec 24 '20

For sure, here's the exact code I use to avoid the JSON error in a live Netlify + Sapper project. In this code I'm pulling in all posts through the prefetch and filtering, for me the filter was preventing Sapper from rendering any blog routes that were not loaded somewhere else. I put this code in the same file where my filter is but it can go in any .svelte file.

<div class="sr-only">
<!--You can iterate over the links from your preload fetch of posts-->
  {#each posts as { slug, title }}
      <a rel="prefetch" href="blog/{ slug }">{title}</a>
  {/each}
<!--And manually put any links that are breaking as well (it means Sapper doesn't think you're using them)-->
<a rel="prefetch" href="/someotherpage">Some page name for screen readers (nobody else sees it)</a>
</div>

I'm using the class sr-only to hide from everyone but screen readers, there are plenty options for this class but the flavor I use in my global css is this.

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

You might also want to put a heading on top of that list of links so it's not confusing for screen readers.

Dan Ryland • Jul 25 '20

I'm getting the same error.

Dan Ryland • Jul 25 '20

I manually switched the name of the .md file from the title to slug which allowed me to get to the article and it seems @benjamin's suggestion doesn't work

Sean • Jul 29 '20

I hit the same problem and setting the identifier_field didn't work for me either.

Benjamin Bykowski • Jul 22 '20

Great post!

One thing threw me so sharing in case it helps @triptych and others:

Netlify CMS will use the title field as the slug and this will cause a JSON error as Sapper will look for a markdown file with the wrong name.

Add identifier_field: "slug" to the config.yml under collections:

collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "static/posts" # The path to the folder where our blog posts are stored
    identifier_field: "slug" # Tells Netlify to use the slug field as the slug (and file name) value

Andrew Wooldridge • Jun 21 '20

Fantastic article! I have one addition - you have to configure the confirmation email to go to either a special location or you have to add the widget to your head --> You might want to add some information about this in a follow up post or edit this one community.netlify.com/t/common-iss...