I am a very beginner here learning React. I tried doing a react project with Vite. This is what I did:
1- Create a folder on Desktop, named it “react”.
2- Open the folder in VScode.
3- Open the terminal (ctrl + J).
4- Type npm create vite@latest reactjobs
, where reactjobs
is the projct’s name.
5- I chose React framework and plain JavaScript.
6- Typed: cd reactjobs
then npm install
waited a bit, then npm run dev
.
And here is the issue… when everything seems to work right, the localhost refuses to connect in both edge and chrome browsers, giving this error displayed on my browser:
This site can’t be reached,
localhost refused to connect.
Try:
Checking the connection.
Checking the proxy and the firewall.
ERR_CONNECTION_REFUSED
and in the terminal:
VITE v5.2.8 ready in 641 ms
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
➜ press h + enter to show help
node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);
^
[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/Users/dell/Desktop/reactvite/reactjobs): [Error] Cannot find module 'autoprefixer'
Require stack:
- C:Usersdell.postcssrc.js
Error: Cannot find module 'autoprefixer'
Require stack:
- C:Usersdell.postcssrc.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1142:15)
at Module._load (node:internal/modules/cjs/loader:983:27)
at Module.require (node:internal/modules/cjs/loader:1230:19)
at require (node:internal/modules/helpers:179:18)
at Object.<anonymous> (C:Usersdell.postcssrc.js:6:5)
at Module._compile (node:internal/modules/cjs/loader:1368:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
at Module.load (node:internal/modules/cjs/loader:1205:32)
at Module._load (node:internal/modules/cjs/loader:1021:12)
at cjsLoader (node:internal/modules/esm/translators:366:17)] {
code: 'MODULE_NOT_FOUND',
requireStack: [ 'C:\Users\dell\.postcssrc.js' ]
}
Node.js v21.7.3
I tried many “solutions” but none seemed to solve the issue.
I tried:
1- updating Node.js, from their website, I downloaded the newest version.
2- messing with the vite.config.js
file, adding:
server: {
port: 3000,
},
inside of:
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
}).
3- tried to open XAMP to check if port 3000 was used before, but it wasn’t.
4- Tried turning off the Firewall completely, then restarting the pc.
5- Tried npm install --start postcssrc.js
as I saw these “solutions” on Youtube and google, nothing at all helped fixing this issue.
6- Ofcourse, I tried runnong npm install
again, also tried npm i
as well.
I still can’t open my project on the browser, I literally didn’t start coding yet, and I can’t display the project on my bowser… The weird thing is when I do npm create-react-app
the server works well, but only doesn’t with npm create vite@latest
Please guide me, and thanks a lot in advance.