How to import Markdown files in SvelteKit?

Question

<script>
    import Markdown from '../components/Markdown.svelte';
    import path from '../../static/assets/docs/overview.md';
</script>

<article class="prose prose-red max-w-none">
    <Markdown markdown={path} />
</article>

Here's the warning:

files in the public directory are served at the root path.
Instead of /static/assets/docs/overview.md?import, use /assets/docs/overview.md?import.

If I use import path from '/assets/docs/overview.md'; I get the following error:

9:30:18 PM [vite] Internal server error: Cannot import non-asset file /assets/docs/overview.md which is inside /public.JS/CSS files inside /public are copied as-is on build and can only be referenced via <script src> or <link href> in html.
  Plugin: vite:import-analysis
  File: /Users/me/www/underwriting-ui/src/routes/docs.svelte
      at TransformContext.transform (/Users/me/www/underwriting-ui/node_modules/vite/dist/node/chunks/dep-713b45e1.js:67350:31)
      at async Object.transform (/Users/me/www/underwriting-ui/node_modules/vite/dist/node/chunks/dep-713b45e1.js:42397:30)
      at async doTransform (/Users/me/www/underwriting-ui/node_modules/vite/dist/node/chunks/dep-713b45e1.js:56738:29)

Huberthuberto

Just a suggestion, I will write an answer, but importing markdown file is like importing string, thus using rollup-plugin-string to convert text file to module should work. – Manners

Answer 1

I have the same scenario - documentation in static markdown from which I need to generate HTML at build time. I ended up using vite-plugin-markdown.

add this to your vite.config.js

import { Mode, plugin as markdown } from 'vite-plugin-markdown'

const config = {
  plugins: [markdown({ mode: [Mode.HTML, Mode.TOC], ...})], ...
}

then in your svelte component

import { toc, html } from '~/docs/api/auth.md'

I'm especially happy about "toc", which outputs something like:

[{ level: '1', content: 'foo' }, { level: '2', content: 'bar' }, ...]

Aksoyn

The plugin is not working with Vite 4+ – Tasty

Answer 2

You can import a Markdown file (or any other file) as raw text via the ?raw suffix. For example:

import my_markdown from "$lib/data/my_markdown.md?raw";

Paired together with rendering using markdown-it:

<script>
import MarkdownIt from "markdown-it";
import my_markdown from "$lib/data/my_markdown.md?raw";

const md = new MarkdownIt();
</script>

{@html md.render(my_markdown)}

Bate