Newbie help required when trying to follow an outdated tutorial

[cuteiosdev]

Hi lovely Svelte people, I'm trying to follow the tutorial at https://www.programonaut.com/how-to-create-a-blog-with-svelte-step-by-step/ though running into problems when trying to update it to make use of the 1.0 release and the migration guide at #5774.

Specifically the problem I'm having is with the markdown processing using unified / remark is giving the following error:

TypeError: __vite_ssr_import_3__.default is not a function
    at convertMarkdown (/src/lib/handle-markdown.js:43:25)
    at /src/lib/handle-markdown.js:22:36
    at Array.map (<anonymous>)
    at Module.importMarkdowns (/src/lib/handle-markdown.js:22:22)
    at /src/routes/+page.server.js:3:16
    at async instantiateModule (file:///random/local/directories/here/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:52224:9)

At the moment the handle-markdown.js file looks like the following for me as I'm trying to understand what's going on with the parsing:

//handle-markdown.js

import fs from 'fs';
// import files with pattern
import glob from "glob";
// parse front matter and body of markdown
import fm from "front-matter";
// parse body to html
import unified from "unified";
import remarkParse from 'remark-parse';
import remarkHtml from "remark-html";
import rehypePrism from "@mapbox/rehype-prism";
import rehype from "rehype";

/**
 * import all markdown files in specified path, extract front matter and convert to html
 * @param {string} markdownPath path to folder containing the markdown files (ends on /)
 * @returns [{path, attributes, body}]
 */
export function importMarkdowns(markdownPath) {
    let fileNames = glob.sync(`${markdownPath}*.md`);
    return fileNames.map((path) => convertMarkdown(path));
}

/**
 * convert markdown to object with attributes and html
 * @param {string} path path to file
 * @returns 
 */
export function convertMarkdown(path) {
    // read file
    let file = fs.readFileSync(path, 'utf8');

    console.log(path)

    // extract frontmatter and body with the front-matter package
    let { attributes, body } = fm(file);

    console.log(attributes);
    console.log(body);

    // parse the body to html with the remark/rehype pipeline
    let result = unified()
        .use(remarkParse)
        .use(remarkHtml)
        .processSync(body)
        .contents;

    console.log(result);
    result = rehype().use(rehypePrism).processSync(result).contents;

    return { path, attributes, html: result};
}

export function convertToPostPreview(object) {
    const url = object.path.replace(".md","").replace("src/", "");

    return {...object.attributes, url};
}

Would love some help identifying and tracking down what's happening so that I can continue working through the tutorial. Javascript / HTML is not my regular dev land (I'm an iOS developer) so likely not familiar with what terms to search for when looking for an answer.

Thanks,
Amy.

[eltigerchino]

Hi Amy, turns out the issue was with the method importing and the property name of the result after parsing.
I've suggested some changes below that I haven't tested.

// handle-markdown.js

import fs from 'fs';
// import files with pattern
import glob from "glob";
// parse front matter and body of markdown
import fm from "front-matter";
// parse body to html
- import unified from "unified";
+ import { unified } from "unified";
import remarkParse from 'remark-parse';
import remarkHtml from "remark-html";
import rehypePrism from "@mapbox/rehype-prism";
- import rehype from "rehype";
+ import { rehype } from "rehype";

/**
 * import all markdown files in specified path, extract front matter and convert to html
 * @param {string} markdownPath path to folder containing the markdown files (ends on /)
 * @returns [{path, attributes, body}]
 */
export function importMarkdowns(markdownPath) {
    let fileNames = glob.sync(`${markdownPath}*.md`);
    return fileNames.map((path) => convertMarkdown(path));
}

/**
 * convert markdown to object with attributes and html
 * @param {string} path path to file
 * @returns 
 */
export function convertMarkdown(path) {
    // read file
    let file = fs.readFileSync(path, 'utf8');

    console.log(path)

    // extract frontmatter and body with the front-matter package
    let { attributes, body } = fm(file);

    console.log(attributes);
    console.log(body);

    // parse the body to html with the remark/rehype pipeline
    let result = unified()
        .use(remarkParse)
        .use(remarkHtml)
        .processSync(body)
-        .contents;
+        .value;

    console.log(result);
-    result = rehype().use(rehypePrism).processSync(result).contents;
+    result = rehype().use(rehypePrism).processSync(result).value;

    return { path, attributes, html: result};
}

export function convertToPostPreview(object) {
    const url = object.path.replace(".md","").replace("src/", "");

    return {...object.attributes, url};
}

I've also created an updated and working example based on the linked tutorial.
Although, it uses remark instead of unified and remark-parse from your example.
https://stackblitz.com/edit/sveltejs-kit-template-default-mzer7j?file=src/routes/posts/[id]/+page.svelte

[cuteiosdev]

Thanks heaps. That works really well. I'm now getting the following CORS error. Any ideas how to solve this?

Error: CORS error: No 'Access-Control-Allow-Origin' header is present on the requested resource
    at /node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:165:12
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async load (/src/routes/+page.js:4:19)
    at async Module.load_data (/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:110:17)
    at async eval (/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:195:13)

[eltigerchino]

Can you provide a sample of the code that’s causing this?

[cuteiosdev]

The +page.svelte is currently defined as the following:

<!-- /src/routes/+page.svelte -->
<script>
    import PostCard from "/src/components/post-card.svelte";
    export let posts;
</script>

<style>
 main {
     padding: 4vw;
 }
 :global(article) {
     border-bottom: 1px solid lightgray;
 }
</style>

<main>
    <h2>Posts</h2>

    {#each posts as post}
    <PostCard {...post}/>
    {/each}
</main>

My limited understanding of web dev stuff is that this is likely due to server configuration? Maybe?

[cuteiosdev]

Ohh, I see where this is going wrong. It's in +page.js and trying to access an external site for the posts.

[eltigerchino]

Yup, the example shows it using an absolute URL to fetch the posts, but in SvelteKit a relative URL would have worked better.

In my updated example, we ditch the server endpoints in favour of load functions in +page.server.js so we don’t have to worry about fetching.