Layout relative path problem with monorepo and VSCode

[Magnus-Ignitic]

Summary

When adding mdsvex to a mono repo SvelteKit project (where the SvelteKit project resides in a subfolder) I get the following error in source files:

Error: The layout path you provided couldn't be found at either
./src/mdsvex.svelte or /[Workspace root path]/src/mdsvex.svelte.
Please double-check it and try again.

It seems the relative path is based on the workspace root folder and not the location of svelte.config.js.

I only get the error in VSCode. Dev server and building works fine.

svelte.config.js

import adapter from '@sveltejs/adapter-netlify';
import { vitePreprocess } from '@sveltejs/kit/vite';
import path from 'path';
import { mdsvex } from 'mdsvex';

/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexOptions = {
  extensions: ['.md'],
  layout: {
    _: './src/mdsvex.svelte' // ← Also tried with path.resolve('./src/mdsvex.svelte')
  }
}

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  extensions: ['.svelte', '.md'],
  preprocess: [mdsvex(mdsvexOptions), vitePreprocess({})],
  kit: {
    adapter: adapter(),
  // ...
}

Workaround(?)

Using dirname() to get the absolute path to the svelte.config.js seems to work:

const mdsvexOptions = {
  extensions: ['.md'],
  layout: {
    _: dirname(fileURLToPath(import.meta.url)) + '/src/mdsvex.svelte'
  }
}

[joekrump]

Thanks for taking the time to write this up @Magnus-Ignitic . I just ran into the same problem and the workaround provided helped me get unstuck.

[rotimi-best]

For anyone else trying to figure out where to get dirname and fileURLToPath from, here you go:

import { fileURLToPath } from 'node:url';
import { dirname } from 'node:path';

[sdarnell]

I had a similar issue with Jetbrains Rider/Webstorm which ends up running with the current directory being the settings directory of the IDE.
I did wonder whether a better option for MDsvex might be to scan upwards to find the directory containing a package.json or svelte.config.* file (which would at least fix the my scenario), but that may still not solve all cases. It's a shame Sveltekit doesn't pass through the root path of the project or the dir of the svelte.config file.

Also, just as a note, there's a newer import.meta.dirname https://nodejs.org/api/esm.html#importmetadirname which is a little simpler than fileURLToPath+dirname, e.g.:

_: join(import.meta.dirname, './src/lib/mdsvex/mdsvex.svelte')

But it requires node 20.11.0+