React and NextJs net::ERR_ABORTED 404 (Not Found)

Viewed 763

When creating a default react project or a default nextjs project I get 404's I've tried on different machines and there it worked without any issue, so I am wondering what is wrong with my mac's configuration.

What Id did:

  • Create a new nextjs project using "npx create-next-app"

  • Everything got installed correctly (I am using node v16.9.1, but had the same issue with 14.6.x)

  • when I now run: npm run dev in the newly created folder the server starts correctly on port 3000

  • when navigating to 0.0.0.0:3000 the page doesn't load and remains white however the console shows:

    • GET http://localhost:3000/_next/static/chunks/webpack.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found) localhost/:1
    • GET http://localhost:3000/_next/static/chunks/main.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found) localhost/:1
    • GET http://localhost:3000/_next/static/chunks/react-refresh.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found) localhost/:1
  • GET http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found) localhost/:1

  • GET http://localhost:3000/_next/static/development/_buildManifest.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found) localhost/:1

  • GET http://localhost:3000/_next/static/chunks/pages/index.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found) localhost/:1

  • GET http://localhost:3000/_next/static/development/_ssgManifest.js?ts=1632035639230 net::ERR_ABORTED 404 (Not Found)

when trying a "naked" react app:

  • npx create-react-app react1
  • cd react1
  • npm starty

I get the following errors:

  • GET http://localhost:3001/%PUBLIC_URL%/manifest.json 400 (Bad Request) manifest.json:1 Manifest: Line: 1, column: 1, Syntax error. favicon.ico:1
  • GET http://localhost:3001/%PUBLIC_URL%/favicon.ico 400 (Bad Request)
  • The attempt to bind "/%PUBLIC_URL%/manifest.json" in the workspace failed as this URI is malformed.

Probably both are not related, just wanted to add it in case they are.

1 Answers

I faced a similar issue with an existing project when I cloned the git repository to a Windows machine. I got the same error messages on browser console after running the app. It took me hours to figure out the cause of the problem.

It was that the project folder had a special character. Lets say it was Hello%20World. Renaming the folder to Hello-World fixed the problem. The "%" character was causing that issue.

Related