AWS hosting problem in single page application in react

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

GraphQL API

Amplify Version

Amplify Categories

hosting

Backend

Amplify CLI

Environment information

{ "name": "example", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build --base=./", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@aws-amplify/backend": "^1.2.1", "@aws-amplify/cli": "^12.12.6", "@reduxjs/toolkit": "^2.2.7", "aws-amplify": "^5.3.21", "crypto-js": "^4.2.0", "react": "^18.3.1", "react-adsense": "^0.1.0", "react-dom": "^18.3.1", "react-helmet": "^6.1.0", "react-icons": "^5.3.0", "react-intersection-observer": "^9.13.1", "react-redux": "^9.1.2", "react-router-dom": "^6.26.0", "react-share": "^5.1.0", "react-share-kit": "^1.1.0", "react-shimmer-effects": "^1.0.3", "react-snap": "^1.23.0", "react-toastify": "^10.0.5", "vite-plugin-node-polyfills": "^0.22.0" }, "reactSnap": { "source": "dist", "minifyHtml": { "collapseWhitespace": false, "removeComments": false }, "include": [ "/", "/about-us", "/contact-us", "/login", "/register" ] }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.20", "eslint": "^8.57.0", "eslint-plugin-react": "^7.34.3", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "postcss": "^8.4.41", "tailwindcss": "^3.4.7", "vite": "^5.3.4" } }

Describe the bug

The application intermittently throws a 404 status code, although the UI renders correctly. This seems to occur when the React Router attempts to handle routes that are not explicitly defined as static files.

Modifying the redirects and rewrites configuration to return a 200 status code for all routes (i.e., redirecting all requests to index.html) resolves the issue, allowing the application to function as expected. However, this fix is not persistent.

After redeploying the application, we encounter the following error: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html".

Expected behavior

The React application should handle routing correctly. This means that any route defined within the React Router should display the corresponding component without causing a 404 error, regardless of whether the route matches a static file or not.

Reproduction steps

[ { "source": "https://example.com", "status": "302", "target": "https://www.example.com" }, { "source": "/<*>", "status": "200", "target": "/index.html" } ]

Code Snippet

// Put your code below this line.

Log output

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html".

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

after hosting using custom domain on first deployment it works seamlessly but on auto-deployment on first deployment the default redirect rule is set to 404 but ui is rendered but on console it shows 404 message on second auto deployment i changed redirect rules and 404 on console disappear but below message is shown in the console and the ui is empty. it show this message on console, after changing redirect and rewrite rules: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html".

aws-amplify / amplify-backend