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"

Artur Müller Romanov · Accepted Answer · 2022-03-18 07:11:07Z

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";

answered Mar 18, 2022 at 7:11

Artur Müller Romanov

6,16323 gold badges117 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akinpelumi Taiwo · Accepted Answer · 2022-09-02 20:58:52Z

-1

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

import marked from "marked"

it will solve the problem

answered Sep 2, 2022 at 20:58

Akinpelumi Taiwo

11 bronze badge

2 Comments

Fabus Over a year ago

Right solution but wrong piece of code ;)

Akinpelumi Taiwo Over a year ago

Yeah I see the error the marked should've been in braces { marked }

Collectives™ on Stack Overflow

Marked library in Vue 3 throwing marked__WEBPACK_IMPORTED_MODULE_0__.default error

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related