Marked library in Vue 3 throwing marked__WEBPACK_IMPORTED_MODULE_0__.default error

Question

I want to render markdown in my component, which usually can be done with the marked library which can be installed like so:

yarn add marked

and used in a component like so:

<template>
  <div id="article" class="article page">
    <div v-html="test"></div>
  </div>
</template>


<script setup>
import marked from "marked";

const test = marked('<p>hello</p>')
</script>

But for whatever reason it throws a bunch of errors:

[Vue warn]: Unhandled error during execution of setup function 
  at <Article onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <Article onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>
[Vue Router warn]: uncaught error during route navigation:
TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_0__.default) is not a function
    at setup (app.js:38984:66)
    at callWithErrorHandling (app.js:25167:22)
    at setupStatefulComponent (app.js:32032:29)
    at setupComponent (app.js:31988:11)
    at mountComponent (app.js:29911:13)
    at processComponent (app.js:29886:17)
    at patch (app.js:29487:21)
    at ReactiveEffect.componentUpdateFn [as fn] (app.js:30096:17)
    at ReactiveEffect.run (app.js:23830:29)
    at callWithErrorHandling (app.js:25167:36)
Uncaught (in promise) TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_0__.default) is not a function
    at setup (app.js:38984:66)
    at callWithErrorHandling (app.js:25167:22)
    at setupStatefulComponent (app.js:32032:29)
    at setupComponent (app.js:31988:11)
    at mountComponent (app.js:29911:13)
    at processComponent (app.js:29886:17)
    at patch (app.js:29487:21)
    at ReactiveEffect.componentUpdateFn [as fn] (app.js:30096:17)
    at ReactiveEffect.run (app.js:23830:29)
    at callWithErrorHandling (app.js:25167:36)

Library versions used:

"vue": "^3.2.29"
"vue-loader": "^17.0.0"
"marked": "^4.0.12"

Answer 1

From this I figured that in verion 4 of marked instead of:

import marked from "marked";

you have to import it like so:

import { marked } from "marked";

Answer 2

since marked has been upgraded to version 4 upward, imported marked must be destructured

import marked from "marked"

it will solve the problem