Markdown previewer

HTML-CSS
1

Hello guys,
I am building the markdown previewer with the help of the instruction provided by ASHUTOSH K SINGH
I am at <h1> now but the localhost for me throws an error and does not show anything.
please help.

2

and this is the error I get:
opensslErrorStack: [ ā€˜error:03000086:digital envelope routines::initialization errorā€™ ],
library: ā€˜digital envelope routinesā€™,
reason: ā€˜unsupportedā€™,
code: ā€˜ERR_OSSL_EVP_UNSUPPORTEDā€™

3

share you code space, otherwise itā€™s not possible to tell whats actually happening, please consider doing that, so that others can offer help, happy learning :slight_smile:

1 Like
4

Thanks. here is the code in App.js:

import React from 'react';
import Badge from "react-bootstrap/Badge";
export default class App extends React.Component{
render(){
  return (
    <div className="App">
         
    <div className="container">
      <div className="row mt-4">
        <div className="col text-center"></div>
      <h1>
        <Badge className="text-align-center" variant="light" >Markdown Previewer</Badge>
            </h1>
        <div className="col-md-6">
          <div className="col text-center">
            <h4>
              <Badge className="text-align-center" variant="secondary">Markdown Input</Badge>
            </h4>
          </div>
          </div>
          
        
        <div className="col-md-6">
          <div className="col text-center"><h4><Badge className="text-align-center">Preview</Badge></h4></div>
          
        </div></div>
        
      
    </div></div>
    
  );}
}

and below is the code in index.js:

import React from 'react';

import ReactDOM from 'react-dom/client';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();
5

Did you use the npx create-react-app command or did you clone/fork the repo? If the latter, try starting a fresh create-react-app instead.

What version of Node.js are you using?

It looks like an issue with Node.js and webpack.

  1. Use the latest version of create-react-app (it likely has a webpack fix because it works for me with Node 18).

  2. Or downgrade your Node version to 16.

  3. Or change the start script.

"start": "react-scripts --openssl-legacy-provider start"

1 Like
6

Thank you. I will consider and apply your comments.