Why does my localhost:3000 not work (error 500)

I am trying to follow a tutorial but i run into problems before i even have written a line of code. only terminal commands as seen below:

        *PS C:UsersrubenOneDriveBureaubladdapp> cd .client
        PS C:UsersrubenOneDriveBureaubladdappclient> npm init vite@latest
        √ Project name: ... ./
        √ Select a framework: » react
        √ Select a variant: » react
        Scaffolding project in C:UsersrubenOneDriveBureaubladdappclient...
        Done. Now run:
           npm install
           npm run dev
        PS C:UsersrubenOneDriveBureaubladdappclient> npm install
        added 76 packages, and audited 77 packages in 6s
        7 packages are looking for funding
           run `npm fund` for details
        found 0 vulnerabilities
        PS C:UsersrubenOneDriveBureaubladdappclient> npm run dev
        > dapp1@0.0.0 dev
        > vite
        Pre-bundling dependencies:
           react
           react-dom
           react/jsx-dev-runtime
        (this will be run only when your dependencies or config have changed)
        vite v2.7.10 dev server running at:
           > Local: http://localhost:3000/
           > Network: use `--host` to expose
           ready in 467ms.*

When i go to the localhost i get presented a blank page (in the tutorial it shows a visual and some text.

When i inspect the page i get presented by there errors:

        :3000/:1 
        
                GET http://localhost:3000/ 500 (Internal Server Error)
        localhost/:1 
        
                GET http://localhost:3000/_next/static/chunks/fallback/webpack.js?ts=1641050312655 
        net::ERR_ABORTED 500 (Internal Server Error)
        localhost/:1 
        
               GET http://localhost:3000/_next/static/chunks/fallback/main.js?ts=1641050312655 
         net::ERR_ABORTED 500 (Internal Server Error)
         localhost/:1 
        
               GET http://localhost:3000/_next/static/chunks/fallback/react-refresh.js? 
       ts=1641050312655 net::ERR_ABORTED 500 (Internal Server Error)
         localhost/:1 
        
               GET http://localhost:3000/_next/static/chunks/fallback/pages/_app.js? 
       ts=1641050312655 net::ERR_ABORTED 500 (Internal Server Error)
        localhost/:1 
        
               GET http://localhost:3000/_next/static/chunks/fallback/pages/_error.js? 
       ts=1641050312655 net::ERR_ABORTED 500 (Internal Server Error)

Aswel as this issue:

A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. Starting in Chrome 101, the amount of information available in the User Agent string will be reduced. To fix this issue, replace the usage of navigator.userAgent, navigator.appVersion, and navigator.platform with feature detection, progressive enhancement, or migrate to navigator.userAgentData. Note that for performance reasons, only the first access to one of the properties is shown. 1 source bubble_compiled.js:1

Answer

This could be a permission issue. You are working inside OneDrive folder. So there is a probability that OneDrive is constantly watching every change inside the inner folders and blocking access for other applications. Try starting your project anew in another folder. Preferably in ‘C:UsersrubenDesktop’.