React. js ” code: ‘MODULE_NOT_FOUND’, requireStack: [ ]” issue that prevent localhost to connect

  Kiến thức lập trình

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.

LEAVE A COMMENT