search

pngwn / MDsveX

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

mdsvex with sveltekit@latest causes vite dev server import error #515

Open ErdmanCT13 opened 1 year ago

ErdmanCT13 commented 1 year ago

To illustrate my issue I first run npm create svelte@latest ./

then I install mdsvex as a dev dependency with npm i -D mdsvex

I add a few lines to my svelte.config.json as per the mdsvex docs site, to look like the following. Everything else is unchanged from what SvelteKit comes with.

svelte.config.js

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

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

    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter()
    }
};

export default config;

when I run this with npm run dev

the vite dev server throws the following error 

[vite] Error when evaluating SSR module /@fs/C:/Users/erdma/Desktop/mdsvex test/node_modules/@sveltejs/kit/src/runtime/server/index.js: failed to import "/.svelte-kit/generated/server/internal.js"
|- Error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
    at formatError (file:///C:/Users/erdma/Desktop/mdsvex%20test/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:42609:46)
    at TransformContext.error (file:///C:/Users/erdma/Desktop/mdsvex%20test/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:42605:19)
    at TransformContext.transform (file:///C:/Users/erdma/Desktop/mdsvex%20test/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:40449:22)
    at async Object.transform (file:///C:/Users/erdma/Desktop/mdsvex%20test/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:42883:30)
    at async loadAndTransform (file:///C:/Users/erdma/Desktop/mdsvex%20test/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:53349:29)
WilliamDiakite commented 1 year ago

Have you tried adding ".svelte" extension to your config ?

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

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

    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter()
    }
};

export default config;
ErdmanCT13 commented 1 year ago

@WilliamDiakite I actually resolved this by using sveltePreprocess instead of vitePreprocess. I couldn't say why one works and the other doesn't, but after scratching my head for a while I noticed the mdsvex documentation and all of the tutorials I was looking at used one over the other. The documentation for mdsvex should probably be updated to provide guidance on this scenario since vitePreprocessor is used by default in every new SvelteKit project.

nerometa commented 1 year ago

I reposted this from another issue. I generated my SvelteKit project with pnpm. Can confirm that I had similar problem.

This is my package.json:

"devDependencies": {
  "@sveltejs/adapter-auto": "^2.0.0",
  "@sveltejs/kit": "^1.20.4",
  "@typescript-eslint/eslint-plugin": "^5.45.0",
  "@typescript-eslint/parser": "^5.45.0",
  "eslint": "^8.28.0",
  "eslint-config-prettier": "^8.5.0",
  "eslint-plugin-svelte": "^2.30.0",
  "mdsvex": "^0.10.6",
  "prettier": "^2.8.0",
  "prettier-plugin-svelte": "^2.10.1",
  "sass": "^1.63.6",
  "svelte": "^4.0.0",
  "svelte-check": "^3.4.3",
  "svelte-preprocess": "^5.0.4",
  "tslib": "^2.4.1",
  "typescript": "^5.0.0",
  "vite": "^4.3.6"
}

My Config:

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

/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexOptions = {
    extension: ['.md']
};

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

    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter()
    }
};

export default config;

And this is the error it gives:

10:06:26 PM [vite] Error when evaluating SSR module /node_modules/.pnpm/@sveltejs+kit@1.20.5_svelte@4.0.0_vite@4.3.9/node_modules/@sveltejs/kit/src/runtime/server/index.js: failed to import "/.svelte-kit/generated/server/internal.js"
|- TypeError: Error while preprocessing /home/verdilaq/Documents/VSCodium/nerometa-blog/.svelte-kit/generated/root.svelte - ext.split is not a function
    at /home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/mdsvex@0.10.6_svelte@4.0.0/node_modules/mdsvex/dist/main.cjs.js:26041:9
    at Array.map (<anonymous>)
    at markup (/home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/mdsvex@0.10.6_svelte@4.0.0/node_modules/mdsvex/dist/main.cjs.js:26040:56)
    at process_markup (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/svelte@4.0.0/node_modules/svelte/src/compiler/preprocess/index.js:309:26)
    at preprocess (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/svelte@4.0.0/node_modules/svelte/src/compiler/preprocess/index.js:355:31)
    at async compileSvelte (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@2.4.2_svelte@4.0.0_vite@4.3.9/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:89:20)
    at async TransformContext.transform (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@2.4.2_svelte@4.0.0_vite@4.3.9/node_modules/@sveltejs/vite-plugin-svelte/src/index.js:220:20)
    at async Object.transform (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/vite@4.3.9_sass@1.63.6/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:42919:30)
    at async loadAndTransform (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/vite@4.3.9_sass@1.63.6/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:53385:29)
pngwn commented 1 year ago

I think this is due to changes in how preprocessors are applied. The mdsvex one now needs to come first.

Could you try swapping the order and see if this makes the problem go away?

nerometa commented 1 year ago

I reposted this from another issue. I generated my SvelteKit project with pnpm. Can confirm that I had similar problem.

This is my package.json:

"devDependencies": {
  "@sveltejs/adapter-auto": "^2.0.0",
  "@sveltejs/kit": "^1.20.4",
  "@typescript-eslint/eslint-plugin": "^5.45.0",
  "@typescript-eslint/parser": "^5.45.0",
  "eslint": "^8.28.0",
  "eslint-config-prettier": "^8.5.0",
  "eslint-plugin-svelte": "^2.30.0",
  "mdsvex": "^0.10.6",
  "prettier": "^2.8.0",
  "prettier-plugin-svelte": "^2.10.1",
  "sass": "^1.63.6",
  "svelte": "^4.0.0",
  "svelte-check": "^3.4.3",
  "svelte-preprocess": "^5.0.4",
  "tslib": "^2.4.1",
  "typescript": "^5.0.0",
  "vite": "^4.3.6"
}

My Config:

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

/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexOptions = {
  extension: ['.md']
};

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

  kit: {
      // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
      // If your environment is not supported or you settled on a specific environment, switch out the adapter.
      // See https://kit.svelte.dev/docs/adapters for more information about adapters.
      adapter: adapter()
  }
};

export default config;

And this is the error it gives:

10:06:26 PM [vite] Error when evaluating SSR module /node_modules/.pnpm/@sveltejs+kit@1.20.5_svelte@4.0.0_vite@4.3.9/node_modules/@sveltejs/kit/src/runtime/server/index.js: failed to import "/.svelte-kit/generated/server/internal.js"
|- TypeError: Error while preprocessing /home/verdilaq/Documents/VSCodium/nerometa-blog/.svelte-kit/generated/root.svelte - ext.split is not a function
    at /home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/mdsvex@0.10.6_svelte@4.0.0/node_modules/mdsvex/dist/main.cjs.js:26041:9
    at Array.map (<anonymous>)
    at markup (/home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/mdsvex@0.10.6_svelte@4.0.0/node_modules/mdsvex/dist/main.cjs.js:26040:56)
    at process_markup (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/svelte@4.0.0/node_modules/svelte/src/compiler/preprocess/index.js:309:26)
    at preprocess (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/svelte@4.0.0/node_modules/svelte/src/compiler/preprocess/index.js:355:31)
    at async compileSvelte (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@2.4.2_svelte@4.0.0_vite@4.3.9/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:89:20)
    at async TransformContext.transform (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@2.4.2_svelte@4.0.0_vite@4.3.9/node_modules/@sveltejs/vite-plugin-svelte/src/index.js:220:20)
    at async Object.transform (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/vite@4.3.9_sass@1.63.6/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:42919:30)
    at async loadAndTransform (file:///home/verdilaq/Documents/VSCodium/nerometa-blog/node_modules/.pnpm/vite@4.3.9_sass@1.63.6/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:53385:29)

Solved. In options it should be 'extensions' not 'extension'