React + Vite page is not showing anything

Question

I am pretty new to web dev and I am currently trying to build something with React + Vite. But when I run npm run dev the page shows me a completely white screen like this:

And there is no error in the terminal:

I have no idea where to look But this is my App.jsx: This is my Navbar.jsx:

Apgar

Check the browser console if any error is there – Masquer

Please post code as text, not screenshots – Bitty

@Masquer yeah I found the error in the browser console thank you. – Apgar

@Masquer Yeah, there was an error on my console. After fixing it, the screens were rendering correctly. – Mesopause

I faced something very similar to this... The best option here is to check the Chrome console for errors. I found a few there and fixing them promptly rendered the app – Lapsus

@karthikeyan, you comment very helped me. Thanks, man! – Government

Answer 1

Check if you are using the import directives below:

import React from 'react';
import ReactDOM from 'react-dom';

Enlightenment

Answer 2

In My case i follow example : Example Twin + Vite + Emotion + TypeScript

Result is same as you. Nothing show. Code not running and error said "Uncaught ReferenceError: React is not defined"

I fix this with replace " <> " with " <React.Fragment> "

import React , { Fragment } from "react"
              //  ^^^^^^ can use instead of React.Fragment
function App () {
  return (
    <React.Fragment>
     <div> Hello World </div>
    </Reat.Fragment>
  )
}

Anyway this is not correct way to solve this problem. Still wating for another answer.

Dyslalia

Answer 3

properly wrap the provider around the app component.it is also the reason for blank page

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import store from './store.js'
import { Provider } from 'react-redux'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>,
)

Pneumatometer

You're giving advice about the Provider for redux, but the question never mentions redux, so your example doesn't seem relevant – Chromophore

Answer 4

Make sure you add

import React from 'react'

At top of all your files

Durance