PLEASE HELP! My Markdown Previewer doesn't display

Hello
I need help with this Markdown Previewer. I am not quite certain if the problem lies with my JS and CSS link settings. Can someone help me figure it out please?

Here’s the link to my project:
LMS MARKDOWN PREVIEWER (codepen.io)

Much thanks!

1 Like

I think the issue is with your ReactMarkdown component.

When I removed it then I was able to see your content on the page.

I think there is an issue with the import for reactmarkdown.

1 Like

I don’t understand how people get this far without a working app. Test as you go.

You have a couple of problems. First, React is not imported. Go to Settings -> JS -> Add External Scripts/Pens. Type “react” into the search and select the react library and import it. But react-dom has to come after react, so either drag that down to the bottom or delete and re-import it.

When I’m having trouble, I like to simplify. Comment out your last line in your JS and add this:

const App = () => <h1>Howdy!</h1>
ReactDOM.render(<App />, document.getElementById("root"))

This just confirms that React is working now.


When I replace your last line, I notice that there are errors in the dev console:

iframeConsoleRunner-d8236034cc3508e70b0763f2575a8bb5850f9aea541206ce56704c013047d712.js:1 ReferenceError: ReactMarkdown is not defined
at MarkdownPreviewer.render (pen.js?key=pen.js-8799e169-d101-0b11-6aae-804e8a5e65ab:67)
// …
react-dom.production.min.js:177 Uncaught ReferenceError: ReactMarkdown is not defined
at MarkdownPreviewer.render (pen.js?key=pen.js-8799e169-d101-0b11-6aae-804e8a5e65ab:67)
// …

So, there is something wrong with either your markdown import or how you are accessing it.

1 Like

Also, as a sidenote, your might find working with codesandbox to be a better experience.

It comes with react templates so you don’t have to worry about any of this setup.
And it is super easy to add dependencies.

1 Like

Thank you jwilkins!! i will bookmark it for personal projects in the near future.

Hi Kevin
I did amend the JS settings but will try amending the markdown import and continue testing as I go. And let you know when I find the solution.

Thanks!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.