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;

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;

• javascript
• reactjs
• typeerror

Share Improve this question Follow edited Nov 3, 2021 at 20:55 Progman 19.7k77 gold badges5555 silver badges8282 bronze badges asked Nov 3, 2021 at 18:01 luffy78luffy78 5111 gold badge22 silver badges44 bronze badges 2

• thank you for your help and your time! – luffy78 Commented Nov 3, 2021 at 18:02
• anyone can't help me? – luffy78 Commented Nov 4, 2021 at 17:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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

import { marked } from 'marked'

If you are using Next.js 14 and under you will get:

"WEBPACK_IMPORTED_MODULE_3_.functionName) is not a function".

On Next.js 15, it says

"[ Server ] Error: Attempted to call functionName() from the server but functionName is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component."

In conclusion, you need to create a client ponent and call the function there, then return the client ponent.

Sorry if this seems out of place or poorly worded. I am very frustrated it took this long for me to fix and needed to get this out.