Build a Markdown Previewer - Passing code stopped working

JavaScript
1

Hello,

I have completed this project quite some time ago. One day randomly looking at my pens I saw that suddenly the preview does not show anything at all and that the code isn’t passing any of the tests except the first one. Although I didn’t change anything. What might be the reason? This is the URL of my pen: https://codepen.io/MuazD/pen/XWvQbOj

On the pens page https://codepen.io/MuazD/pens I can see that the thumbnail shows the correct preview for a couple of seconds than it disappears. Really strange.

Thanks in advance!

PS: Accidentally deleted my original topic here
Hence posting it again. Sorry for the mistake.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge Information:

Front End Development Libraries Projects - Build a Markdown Previewer

2

I uncommented everything but not much luck and only passes three. How long ago was the code written? Rewrite it perhaps but timewise that might not make sense.

3

Thank you for your response! I had submitted it on Nov 20.
Yeah. I have created a new pen and copied over the original one to see what happens. Result is the same :worried:

4

I think you may of linked the wrong project, the quote machine is what you have and it passes.

5

for the markdown previewer you should pass the tests for the markdown previewer tho

6

Yeah, sure thing. Thank you. I had already completed the project and passed all tests. And also now the correct project is selected in the drop-down. Initial issue persists. No preview (except for the background-color) and non of the tests (except for the first one) are passing. :grimacing: I don’t know any further. :worried:

7

Hi @freakjr008

Here is an error message:

image
image416×151 5.2 KB

Try using different scripts.

I had the same problem recently with past projects on CodePen.
They appear correctly in the preview, but do not load correctly when opened. For me, removing the esm link from the first line in the script resolved it.

Happy coding

1 Like
8

Thank you very much for the suggestion!
I was using React 18. After couple trial and errors switching to React 17 and deleting the esm links fixed the problem. :tada:

1 Like
9

Just to be clear, when you do a versionless import on Codepen you get React 19 now, and it has removed the ReactDOM.render method (which was deprecated in V18)

If you want to use 19 you can update your code.

import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
import { createRoot } from "https://esm.sh/react-dom/client";

// React code

const root = createRoot(document.querySelector("#root-container"));
root.render(<PreviewerApp />);
1 Like
10

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