mdsvex errors out of the box

[theetrain]

Problem

In a fresh project, mdsvex fails when markdown is used in +page.svelte files.

Upstream issue: pngwn/MDsveX#685

Reproduction

1. npx sv create
2. Select mdsvex as an add-on

npx sv create
┌  Welcome to the Svelte CLI! (v0.6.10)
│
◇  Where would you like your project to be created?
│  mdsvex-test
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Javascript with JSDoc comments
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  mdsvex
│
◇  Which package manager do you want to install dependencies with?
│  npm
│
◆  Successfully setup add-ons
│
◆  Successfully installed dependencies

3. Modify svelte.config.js to include .svelte and .svx files

import { mdsvex } from "mdsvex";
import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
    adapter: adapter()
  },

    preprocess: [mdsvex({
+     extensions: [".svelte", ".svx"],
    })],
    extensions: [".svelte", ".svx"]
};

export default config;

4. Add some markdown to src/routes/+page.svelte
5. Observe error

[vite] Pre-transform error: .svelte-kit/generated/root.svelte:48:68 `</p>` attempted to close an element that was not open
https://svelte.dev/e/element_invalid_closing_tag
[vite] Error when evaluating SSR module /.svelte-kit/generated/root.js:
|- 

[vite] Error when evaluating SSR module /.svelte-kit/generated/server/internal.js:
|- 

[vite] Error when evaluating SSR module /node_modules/@sveltejs/kit/src/runtime/server/index.js:

Proposal

I'm not entirely sure how to solve this, but my assumptions are:

1. Solve upstream issue: Preprocessing .svelte files causes error pngwn/MDsveX#685
2. Ensure new projects using npx sv create that add on mdsvex have their svelte.config.js include the extensions option preconfigured.
3. Upgrade sv template to use latest mdsvex version

Environment

  System:
    OS: macOS 15.2
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 227.28 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.volta/tools/image/node/22.11.0/bin/node
    npm: 10.9.0 - ~/.volta/tools/image/node/22.11.0/bin/npm
    pnpm: 9.15.2 - ~/.volta/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.205
    Safari: 18.2
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.3.1 
    @sveltejs/kit: ^2.0.0 => 2.15.1 
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.4 
    mdsvex: ^0.12.3 => 0.12.3 
    svelte: ^5.0.0 => 5.16.0 
    vite: ^5.4.11 => 5.4.11 

[manuel3108]

Adding the extensions property to the mdsvex call has already been discussed here: #186. Based on that issue it looks like people have different opinions on how they should name their svelte markdown files. Therefore, i would suggest we leave this for customization.

I'm able to reproduce the error you are getting though. Point 4 you mentioned is actually optional and not required to reproduce the error. Interestingly enough, renaming src/routes/+page.svelte to src/routes/+page.svx actually solves the error.

This is an upstream error, therefore closing.