How to reuse markdown renderer by external project?

[inix]

Dear developers:
I have a project which can publish markdown format posts, it is a PHP backend and frontend of admin pages is developed by Vue app.

My idea:

1. Write a post
2. Get markdown content by frontend
3. reuse vuepress markdown module and render it to final HTML.

I had installed VuePress:

yarn add -D vuepress@next

My codes look like:

<template>
  <div class="h-panel">
...
        <div id="vditor" class="vditor" />    // markdown editor
  </div>

<script>
import { createMarkdown } from '@vuepress/markdown';

  data() {
    return {
       markdown: null;
       mdContent: '',
    };
  },
  methods: {
     this.markdown = createMarkdown();   // errors occured when building
  },
  toHtmlContent(md): { 
      const rendered = this.markdown.render(md);  // also errors when building
  },
</script>

Errors when builded with yarn:

  './node_modules/@vuepress/utils/lib/requireResolve.js 12:15-39\n' +
    'Critical dependency: the request of a dependency is an expression\n' +
    '    at RequireResolveContextDependency.getWarnings (/usr/local/lib/node_modules/hey-cli/node_modules/webpack/lib/dependencies/ContextDependency.js:40:18)\n' +
    '    at Compilation.reportDependencyErrorsAndWarnings (/usr/local/lib/node_modules/hey-cli/node_modules/webpack/lib/Compilation.js:1454:24)\n' +
    '    at /usr/local/lib/node_modules/hey-cli/node_modules/webpack/lib/Compilation.js:1258:10\n' +
    '    at AsyncSeriesHook.eval [as callAsync] (eval at create (/usr/local/lib/node_modules/hey-cli/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:31:1)\n' +
    '    at AsyncSeriesHook.lazyCompileHook (/usr/local/lib/node_modules/hey-cli/node_modules/tapable/lib/Hook.js:154:20)\n' +
    '    at Compilation.finish (/usr/local/lib/node_modules/hey-cli/node_modules/webpack/lib/Compilation.js:1253:28)\n' +
    '    at /usr/local/lib/node_modules/hey-cli/node_modules/webpack/lib/Compiler.js:672:17\n' +
    '    at _done (eval at create (/usr/local/lib/node_modules/hey-cli/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)\n' +
    '    at eval (eval at create (/usr/local/lib/node_modules/hey-cli/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:22)\n' +
    '    at /usr/local/lib/node_modules/hey-cli/node_modules/webpack/lib/Compilation.js:1185:12\n' +
    '    at /usr/local/lib/node_modules/hey-cli/node_modules/webpack/lib/Compilation.js:1097:9\n' +
    '    at processTicksAndRejections (internal/process/task_queues.js:75:11)\n' +
    ' @ ./node_modules/@vuepress/utils/lib/index.js\n' +
    ' @ ./node_modules/@vuepress/markdown/lib/plugins/assetsPlugin.js\n' +
    ' @ ./node_modules/@vuepress/markdown/lib/plugins/index.js\n' +
    ' @ ./node_modules/@vuepress/markdown/lib/index.js\n' +
...

Could you help me?

[meteorlxy]

@vuepress/markdown is highly customized for vuepress, which should be used in Node.js, not in browser.

You can try to use markdown-it or showdown.js directly.

I also have a project for that usage: https://github.com/meteorlxy/vue-showdown

[inix]

OK, thank you,I will take a look.