REACT marked is not defined (on codesandbox)

REACT marked is not defined (on codesandbox)
0.0 0

#1

Ok, what did I do wrong?
I added marked as a dependency but it is not recognised in code:


#2

So in which file are you using it?


#3

This is my first attempt with codeSandbox. I added the dependency but “marked” is not recognised in index.js.
Clearly I missed a step somewhere.


#4

I don’t see anything related to marked inside index.js?


#5
 createMarkup() {
    return {
      __html: marked(this.props.md)
    }
  }

and

  render() {
    let value = this.state.md;
    return (<div>
      <div className="left">
        <h3>Input markdown here:</h3>
        <textarea value={this.state.md} onChange={this.updatePreview.bind(this)}></textarea>

      </div>
      <div className="right">
        <h3>Your markdown preview:</h3>
        <div className="outputbox" dangerouslySetInnerHTML={{ __html: marked(value) }}></div>
      </div>
    </div>)
  }

The codepen working version is here


#6

Okay, so if you click the link from your first post, what do you see? I only see some default app and marked in the dependency list. So, I have no idea what you tried.

Anyway, here is what worked for me. Orginal code index.js:

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <h2>Start editing the to see some magic happen {"\u2728"}</h2>
  </div>
);

render(<App />, document.getElementById("root"));

Working test (at least confirming that marked works):

import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import marked from 'marked';

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};


const createMarkup = (val) => {
  console.log(marked(val))
}

createMarkup("# test")

const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <div dangerouslySetInnerHTML={{ __html: marked(`## test`) }}></div>
  </div>
);

render(<App />, document.getElementById("root"))

#7

So I missed import marked from 'marked';

Thanks for taking the time.