React开发Markdown编辑器调用marked库报is not a function错误如何解决

你安装的marked依赖为4.0及以上版本，该版本调整了导出规则，不再支持默认导出直接作为函数调用，同时移除了内置的sanitize参数配置项，和现有代码写法不兼容。

方案1：适配高版本marked（推荐） #

• 修改导入语句，将默认导入改为解构导入命名导出的marked对象
• 如果需要HTML过滤能力，额外安装dompurify依赖处理内容安全，替代原sanitize参数

修改后的完整代码如下：

import React, {Component} from 'react';
import './App.css';
import {sampleText} from './sampleText'
// 调整为解构导入marked对象
import { marked } from 'marked'
// 如需过滤不安全HTML，安装dompurify后导入：import DOMPurify from 'dompurify'

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

  renderText = text => {
    const _html = marked.parse(text)
    // 启用HTML过滤写法：const _html = DOMPurify.sanitize(marked.parse(text))
    return { __html: _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;

方案2：降级marked到3.x版本 #

无需修改现有代码，直接执行命令降级依赖即可：

npm install marked@3.0.8
# 用yarn的话执行：yarn add marked@3.0.8

内容的提问来源于stack exchange，提问作者luffy78