TypeError: marked__WEBPACK_IMPORTED_MODULE_3___default(...) is not a function

Question

I'm working on an editor markdown in my current project. I searched on different questions on stackoverflow but that didn't help me to resolve my problem. I get this TypeError: enter image description here

This is my code:

  import React, {Component} from 'react';
  import './App.css';
  import {sampleText} from './sampleText'
  import marked  from 'marked'


  class App extends Component {
    state = {
      text: sampleText
    }
    
    handleChange = event => {
      const text = event.target.value
      this.setState({text})
    }

    renderText = text => {
      const _html = marked(text, { sanitize: true})
      return { __html}
    }
    

    render () {
      return(
        <div className='container'>
          <div className='row'>
            <div className='col-sm-6'>
              <textarea
                onChange={this.handleChange}
                value={this.state.text}
                className='form-control'
                rows='35'/>
            </div>
            <div className='col-sm-6'>
              <div dangerouslySetInnerHTML={this.renderText(this.state.text)}/>
            </div>
          </div>
        </div>
      )
    }
  }

  export default App;

Answer 1

It looks like your import for marked is incorrect. It should be

import { marked } from 'marked'