</p> attempted to close an element that was not open

[NazCodeland]

Hey everyone, my mdsvex.config.mjs looks like this

import highlighter from './src/lib/utilities/codeHighlighter.js';

const config = {
	extensions: ['.svelte', '.md'],
	highlight: {
		alias: { js: 'javascript' },
		highlighter
	}
};

export default config;

I am working on a SvelteKit project and I am using the Giscus component: https://github.com/giscus/giscus-component. I've noticed that if I include '.svelte' in the extensions array in mdsvex.config.mjs , I get the following error

[vite] Error when evaluating SSR module /src/routes/(app)/blog/[slug]/+page.svelte:

Internal server error: /node_modules/.pnpm/@giscus+svelte@2.2.8_svelte@3.57.0/node_modules/@giscus/svelte/package/Giscus.svelte:44:5 </p> attempted to close an element that was not open
  Plugin: vite-plugin-svelte
  File: /node_modules/.pnpm/@giscus+svelte@2.2.8_svelte@3.57.0/node_modules/@giscus/svelte/package/Giscus.svelte:44:5
   42 |  {loading}
   43 |  />
   44 |  {/if}</p>

If I remove '.svelte' from the extensions array, and it only contains `'.md', the error goes away.

I've made sure that the Giscus component code does not contain any </p> or any other element.

Here is my project where the error occurs; https://github.com/NazCodeland/NazCodeland-V2.git, if you go into the mdsvex.config.mjs and add '.svelte' in the extensions array, the error will occur.

[NazCodeland]

As soon as I made the issue, I understood what was going on, the Giscus component looks like this,

<script>
import { onMount } from 'svelte';
export let id = undefined;
export let host = 'https://giscus.app';
export let repo;
export let repoId;
export let category = undefined;
export let categoryId = undefined;
export let mapping = 'pathname';
export let term = undefined;
export let strict = '0';
export let reactionsEnabled = '1';
export let emitMetadata = '0';
export let inputPosition = 'bottom';
export let theme = 'light';
export let lang = 'en';
export let loading = 'eager';
let mounted = false;
onMount(() => {
    mounted = true;
    import('giscus');
});
</script>


{#if mounted}
  <giscus-widget
    {id}
    {host}
    {repo}
    repoid={repoId}
    {category}
    categoryid={categoryId}
    {mapping}
    {term}
    {strict}
    reactionsenabled={reactionsEnabled}
    emitmetadata={emitMetadata}
    inputposition={inputPosition}
    {theme}
    {lang}
    {loading}
  />
{/if}

instead of the giscus-widget closing in it's shorthand form <giscus-widget /> I changed it to <giscus-widget></giscus-widget> and that made the error go away.

That fix works for me locally but when I deploy my project to Vercel or when someone else clones the repo and installs the packages, that error will occur again.

I am no longer sure if this problem is an issue with mdsvex or giscus component, please let me know if I should post this issue in their repository, thank you in advance.

[pngwn]

That 'shorthand' isn't valid HTML really. Mdsvex is a little stricter about which self closing tags are allowed which could be causing the issue. Custom elements should have an explicit closing tag.

[NazCodeland]

I didn't know that custom elements should have an explicit closing tag. I've opened an issue in the Giscus repository; giscus/giscus-component#1371

Thanks for the help!