My multipage app keeps getting the 404 error on page 4

Support
,
1

My app is an escape room game and it deployed with no issues.. but when I play and get to the 3rd room I keep getting the 404 error. How can I fix this?

7:12:47 AM: Netlify Build
7:12:47 AM: ────────────────────────────────────────────────────────────────
7:12:47 AM: ​
7:12:47 AM: ❯ Version
7:12:47 AM: @netlify/build 32.0.0
7:12:47 AM: ​
7:12:47 AM: ❯ Flags
7:12:47 AM: accountId: 65b482c8d130b84fc4e1049c
7:12:47 AM: baseRelDir: true
7:12:47 AM: buildId: 68025d8b6c9d0a00081cfbf7
7:12:47 AM: deployId: 68025d8b6c9d0a00081cfbf9
7:12:47 AM: ​
7:12:47 AM: ❯ Current directory
7:12:47 AM: /opt/build/repo/zombie-escape
7:12:47 AM: ​
7:12:47 AM: ❯ Config file
7:12:47 AM: No config file was defined: using default values.
7:12:47 AM: ​
7:12:47 AM: ❯ Context
7:12:47 AM: production
7:12:47 AM: ​
7:12:47 AM: Build command from Netlify app
7:12:47 AM: ────────────────────────────────────────────────────────────────
7:12:47 AM: ​
7:12:47 AM: $ vite build
7:12:47 AM: vite v6.2.6 building for production…
7:12:47 AM: transforming…
7:12:48 AM: ✓ 67 modules transformed.
7:12:48 AM: rendering chunks…
7:12:48 AM: computing gzip size…
7:12:48 AM: dist/index.html 0.47 kB │ gzip: 0.30 kB
7:12:48 AM: dist/assets/transmitter-CDRNUn4m.png 315.83 kB
7:12:48 AM: dist/assets/quarantine_background-BzLJMusN.png 2,012.34 kB
7:12:48 AM: dist/assets/locker_room-BxNuLVPh.png 2,384.54 kB
7:12:48 AM: dist/assets/game_start-Cu_53ho3.png 3,194.81 kB
7:12:48 AM: dist/assets/final_room-D4Lilfse.png 3,242.20 kB
7:12:48 AM: dist/assets/room2_corridor-Q9FsSvWk.png 3,918.56 kB
7:12:48 AM: dist/assets/tunnelsystem-DHU9MENc.png 5,024.14 kB
7:12:48 AM: dist/assets/infected_door-BxWoRvbB.png 5,066.57 kB
7:12:48 AM: dist/assets/outpost_background-Drj5Kra8.png 5,536.34 kB
7:12:48 AM: dist/assets/vent_step-DiqUvxNI.png 5,565.78 kB
7:12:48 AM: dist/assets/index-CpUSb2dG.css 679.04 kB │ gzip: 66.42 kB
7:12:48 AM: dist/assets/index-xBVG56u6.js 250.96 kB │ gzip: 79.81 kB
7:12:48 AM: ✓ built in 1.20s
7:12:49 AM: ​
7:12:49 AM: (build.command completed in 1.4s)
7:12:49 AM: ​
7:12:49 AM: (Netlify Build completed in 1.9s)
7:12:50 AM: Section completed: building
7:12:55 AM: Finished processing build request in 25.221s

2

@thatsjustkari Test your project locally with npm run build && npm run preview

If the issue occurs there too, then it’s unrelated to Netlify and you just need to debug your project.

3

@nathanmartin I have done that and it works all the way through with no errors.

4

@thatsjustkari What’s the link to the site and steps to reproduce?

Do you have a public repository that others can check?

5

@nathanmartin
The error occurs after clicking the continue button on this page: https://escapezombie.netlify.app/room3

The whole game starts here: https://escapezombie.netlify.app

If you play from the start here are the answers:

  • Room 1: click on the keypad next to the door and enter 9327
  • Room 2: ‘Dr. Lin’: ‘Escaped’, ‘Corporal James’: ‘Deceased’, ‘Nurse Helena’: ‘Turned’, ‘Agent Novak’: ‘Missing’

My code repo is here: GitHub - PixelCharmer/zombie_game

6

@thatsjustkari You aren’t wrong, it does work with npm run preview, and it seems it is because Vite’s built in preview does something I wasn’t aware it does.

The issue is still as I’d guessed though, and npx serve dist better shows what is occuring.

Your project is a Single Page Application (SPA).
Most of the time the users interactions aren’t causing the browser to change page.
When it gets to that specific one it does try to go to /room3puzzle which doesn’t actually exist.

image
image905×382 122 KB

The application relies on that request being routed to the main /index.html

The simplest representation of the error is the very first page, if you try to go to /room1 directly:
https://escapezombie.netlify.app/room1

There is a warning in Netlify’s documentation about this on these pages:
https://docs.netlify.com/configure-builds/javascript-spas/
https://docs.netlify.com/frameworks/vite/

Avoid 404s for SPAs

If your project is a single page app (SPA) that uses the history pushState method to get clean URLs, you must add a rewrite rule to serve the index.html file no matter what URL the browser requests.

Add a file called _redirects into your public directory.
The contents should be as per the documentation here:
https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

7

@nathanmartin thank you very much, every page now loads correctly.