AWS hosting problem in single page application in react #2016
Description
Before opening, please confirm:
- I have searched for duplicate or closed issues and discussions.
- I have read the guide for submitting bug reports.
- 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
v5
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".