Markdown previewer, failing unit tests, marked is not defined

JavaScript
1

The code,

import React, { Component } from 'react';
import './App.css';
import Input from "./Input";
import Output from "./Output";
import marked from 'marked';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      input:`# Welcome to my React Markdown Previewer!

      ## This is a sub-heading...
      ### And here's some other cool stuff:`
      ,
      output: ""
    }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event){
    let output = marked(this.state.input);
    this.setState({
      input:event.target.value,
      output
    })
  }
  componentDidMount(){
    this.setState({
      output: marked(this.state.input)
    })
  }
  render() {                                                                                                                                                                                                                                                        
    return (                                                                                                                                                                                                                                                        
      <div className="App">                                                                                                                                                                                                                                         
        <header>                                                                                                                                                                                                                                                    
          <h1>Markdown previewer</h1>                                                                                                                                                                                                                               
        </header>                                                                                                                                                                                                                                                   
        <Input content={this.state.input}                                                                                                                                                                                                                           
               action = {this.handleChange}                                                                                                                                                                                                                         
               id="editor" />                                                                                                                                                                                                                                       
        <Output id="preview"                                                                                                                                                                                                                                        
                content={this.state.output}/>                                                                                                                                                                                                                       
      </div>                                                                                                                                                                                                                                                        
    );                                                                                                                                                                                                                                                              
  }                                                                                                                                                                                                                                                                 
}                                                                                                                                                                                                                                                                   
                                                                                                                                                                                                                                                                    
export default App;

The error, ReferenceError: marked is not defined

1 Like
2

I need to know more about how you are setting up the unit test. This code seems to work fine. It’s possible the unit test does not see marked as being imported.
There seems to be some issues regarding marked and the fact that it does not use es6 exports. Try using require() instead.

3

I am imporing the javascript for the unit tests in my index.html. (I am using create-react-app).

4

i’m also working with create-react-app on the same project and getting the same outcome.
to clarify, the problem is :

the fcc test suite does not recognize marked as defined.

this obviously doesn’t pass the tests, but the project clearly works as intended.
i can interchangeably use:

const marked = require('marked');

or

import marked from 'marked'

both give me the same marked is not defined error.

_
_1043×443 64 KB

again, i’ll point out the project works as intended (#preview is updated (in markdown form) as i type in #editor).
bit annoying, feels like a bug, i could be wrong.

5

so i hosted what i was working on in codepen using this method and the fcc test suite recognizes marked.

i’m using it through their cdn.

here’s the codepen.
(pen may be deleted in the future; if so, interpret this as proof of a working example)

don’t forget, on codepen, head tags are in settings.
not quite finished btw, but this problem was bothering me.

when working with create-react-app i was installing marked through npm in a local file (so not globally, if that’s worth mentioning).
is the fcc test suite supposed to recognize create-react-app’s environment?
i just don’t know much about the technical interactions so i can’t tell if this is a bug or i’m doing something wrong.

6

one thing you can do is add the cdn to index.html which is located in the public directory within the create-react-app

the cdn being:

<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.js'></script>

it’s also where i put the fcc test suite cdn (and some fonts, etc.)

import marked from 'marked'

and

const marked = require('marked')

both work btw.

1 Like
7

Thanks adding the script via cdn worked like charm.