pngwn / MDsveX

A markdown preprocessor for Svelte.
https://mdsvex.pngwn.io
MIT License
2.27k stars 96 forks source link

Can't load layouts in svelte kit #290

Open btvoidx opened 2 years ago

btvoidx commented 2 years ago

mdsvex.config.js

const config = {
    extensions: ['.svx'],

    smartypants: {
        dashes: 'oldschool',
    },

    layout: 'src/lib/components/MarkdownLayout.svelte',

    remarkPlugins: [],
    rehypePlugins: [],
};

export default config;

svelte.config.js

import { mdsvex } from 'mdsvex';
import mdsvexConfig from './mdsvex.config.js';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    extensions: ['.svelte', ...mdsvexConfig.extensions],
    preprocess: [preprocess(), mdsvex(mdsvexConfig)],

    kit: {
        target: '#svelte',
    },
};

export default config;

I get this issue when .svx get rendered:

Failed to resolve import "C:UsersAdministratorDocumentsGitHubTM-WebsiteclientsrclibcomponentsMarkdownLayout.svelte" from "src\routes\info\rating.svx". Does the file exist?
2  |  import { create_ssr_component, validate_component } from "svelte/internal";
3  |
4  |  import Layout_MDSVEX_DEFAULT, * as Components from 'C:\Users\Administrator\Documents\GitHub\TM-Website\client\src\lib\components\MarkdownLayout.svelte';
   |                                                      ^
5  |  const metadata = { "title": "test" };
6  |  const { title } = metadata;
Error: Failed to resolve import "C:UsersAdministratorDocumentsGitHubTM-WebsiteclientsrclibcomponentsMarkdownLayout.svelte" from "src\routes\info\rating.svx". Does the file exist?
    at formatError (C:\Users\Administrator\Documents\GitHub\TM-Website\client\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:50738:46)
    at TransformContext.error (C:\Users\Administrator\Documents\GitHub\TM-Website\client\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:50734:19)
    at normalizeUrl (C:\Users\Administrator\Documents\GitHub\TM-Website\client\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:74223:26)
    at async TransformContext.transform (C:\Users\Administrator\Documents\GitHub\TM-Website\client\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:74356:57)
    at async Object.transform (C:\Users\Administrator\Documents\GitHub\TM-Website\client\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:50939:30)
    at async transformRequest (C:\Users\Administrator\Documents\GitHub\TM-Website\client\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:66763:29)
    at async instantiateModule (C:\Users\Administrator\Documents\GitHub\TM-Website\client\node_modules\vite\dist\node\chunks\dep-c1a9de64.js:73412:10)

File, of course, exists.

btvoidx commented 2 years ago

At first I thought it was Windows-only bug, but it actually happens on Ubuntu too.

Edit: nvm, I am dumb, on Ubuntu svelte kit does not even start and it has nothing to do with mdsvex.

pngwn commented 2 years ago

Do you have a reproduction for this, so I can look into it?

kmalkenneth commented 2 years ago

With similar problem here.

svelte.config.js

import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess";

import { mdsvex } from "mdsvex";
const mdsvexConfig = {
  extensions: [".svelte.md", ".md", ".svx"],

  layout: "./layouts/article.svelte",

  smartypants: {
    dashes: "oldschool",
  },

  remarkPlugins: [],
  rehypePlugins: [],
};

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: [".svelte", ...mdsvexConfig.extensions],

  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: [preprocess(), mdsvex(mdsvexConfig)],

  kit: {
    adapter: adapter(),

    // hydrate the <div id="svelte"> element in src/app.html
    target: "#svelte",
  },
};

export default config;

And the error message.

yarn run v1.22.17
warning package.json: No license field
$ svelte-kit dev
Colon is expected
ParseError: Colon is expected
    at error (/home/kenet/Proyectos/experimentos/my-app/node_modules/svelte/compiler.js:17703:20)
    at Parser$1.error (/home/kenet/Proyectos/experimentos/my-app/node_modules/svelte/compiler.js:17779:10)
    at Object.read_style [as read] (/home/kenet/Proyectos/experimentos/my-app/node_modules/svelte/compiler.js:14116:21)
    at tag (/home/kenet/Proyectos/experimentos/my-app/node_modules/svelte/compiler.js:16868:34)
    at new Parser$1 (/home/kenet/Proyectos/experimentos/my-app/node_modules/svelte/compiler.js:17738:22)
    at Object.parse$3 [as parse] (/home/kenet/Proyectos/experimentos/my-app/node_modules/svelte/compiler.js:17870:21)
    at process_layouts (/home/kenet/Proyectos/experimentos/my-app/node_modules/mdsvex/dist/main.cjs.js:25908:26)
    at mdsvex (/home/kenet/Proyectos/experimentos/my-app/node_modules/mdsvex/dist/main.cjs.js:26024:12)
    at file:///home/kenet/Proyectos/experimentos/my-app/svelte.config.js:24:30
    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Looks like a sveltekit bug.

But I really don't know what is going on.

package.json

{
  "name": "my-app",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "svelte-kit preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "@types/cookie": "^0.4.1",
    "mdsvex": "^0.9.8",
    "svelte": "^3.44.0",
    "svelte-check": "^2.2.6",
    "svelte-preprocess": "^4.9.4",
    "tslib": "^2.3.1",
    "typescript": "^4.4.3"
  },
  "type": "module",
  "dependencies": {
    "@fontsource/fira-mono": "^4.5.0",
    "@lukeed/uuid": "^2.0.0",
    "cookie": "^0.4.1"
  }
}