hmsk / vite-plugin-markdown

A vite plugin to import a Markdown file in various formats like Front Matter, HTML, ToC, and React/Vue Component
https://www.npmjs.com/package/vite-plugin-markdown
MIT License
254 stars 44 forks source link

use vite3+vue3,not support require('vite-plugin-markdown') #345

Open codevvvv9 opened 1 year ago

codevvvv9 commented 1 year ago

vite.config.ts is:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const mdPlugin = require('vite-plugin-markdown') // 需要通过commenJs方式引用

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    mdPlugin.plugin({
      mode: ['html'],
    })
  ],
  base: './'
})

but npm run dev get error - Dynamic require of "vite-plugin-markdown" is not supported:

failed to load config from /Users/wushao/wushaoDev/FE-stuty/vue3-demo/vite.config.ts
error when starting dev server:
Error: Dynamic require of "vite-plugin-markdown" is not supported
    at file:///Users/wushao/wushaoDev/FE-stuty/vue3-demo/vite.config.ts.timestamp-1663848973291.mjs:6:9
    at file:///Users/wushao/wushaoDev/FE-stuty/vue3-demo/vite.config.ts.timestamp-1663848973291.mjs:12:16
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
    at async loadConfigFromBundledFile (file:///Users/wushao/wushaoDev/FE-stuty/vue3-demo/node_modules/vite/dist/node/chunks/dep-557f29e6.js:63494:21)
    at async loadConfigFromFile (file:///Users/wushao/wushaoDev/FE-stuty/vue3-demo/node_modules/vite/dist/node/chunks/dep-557f29e6.js:63380:28)
    at async resolveConfig (file:///Users/wushao/wushaoDev/FE-stuty/vue3-demo/node_modules/vite/dist/node/chunks/dep-557f29e6.js:62997:28)
    at async createServer (file:///Users/wushao/wushaoDev/FE-stuty/vue3-demo/node_modules/vite/dist/node/chunks/dep-557f29e6.js:62063:20)
    at async CAC.<anonymous> (file:///Users/wushao/wushaoDev/FE-stuty/vue3-demo/node_modules/vite/dist/node/cli.js:700:24)
MLDMoritz commented 1 year ago

Register it correctly.

import { defineConfig } from 'vite';
import mdPlugin, {Mode} from 'vite-plugin-markdown';

export default defineConfig({
    plugins: [
        mdPlugin({ mode: [Mode.HTML, Mode.TOC, Mode.VUE] })
    ],
});
MaPePeR commented 1 year ago

I tried that, but I got an error: TypeError: mdPlugin is not a function. (Version 2.1.0)

console.log(mdPlugin) shows it as

{
  Mode: { TOC: 'toc', HTML: 'html', REACT: 'react', VUE: 'vue' },
  plugin: [Function: plugin],
  default: [Function: plugin]
}

Changing the import to

import {plugin as mdPlugin, Mode} from 'vite-plugin-markdown';

fixed it for me. I don't understand what is wrong there, though.