AWS hosting problem in single page application in react

[gopalpokhrel1]

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".

[chrisbonifacio]

HI @gopalpokhrel1 👋 thanks for raising this issue.

It seems to be related to hosting so I will transfer to the amplify-backend repo for better support.

[Jay2113]

Hi @gopalpokhrel1 👋 , can you share your Amplify app id? I'd like to review the rewrite rules setup for the app. Additionally, have you ran a production build of your app locally to see if you observe similar issues?

[gopalpokhrel1]

Hello @Jay2113 , here’s the Amplify app ID you requested: d2skll95f8uev1 . Let me know if you need anything else!

[Jay2113]

@gopalpokhrel1 After further investigation, I was unable to reproduce or observe the Failed to load module script: The server responded with a non-JavaScript MIME type of 'text/html' error when accessing routes like /about-us, setting, privacy-policy, etc.

When accessing routes that do not exist, I observed a 404 response, which is expected. Can you confirm if you are still observing this issue? If yes, could you please provide an example of the route on which you are observing it? Does the issue occur after a new deployment? Any additional information that could help reproduce the behavior would be helpful.