Cognito return unexpected script type

0

Hi,

I'm trying to use cognito-federate-midway to do authorization in my React web app. When I send the "fetch" request from UI to cognito, I got an empty page back. And the error log are

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

I googled the error log, and I think the reason is that the returned script type from cognito is "text/html", while my expected script type is module in my index.html I tried to change index.html code, replacing type="module" with type="text/html". But this caused all other pages not work anymore. Part of the code in index.html

<body>
    <div id="app"></div>
    <script type="module" src="./src/index.tsx"></script>
  </body>

btw, I'm using vite.

Is there a way to set the response script type from cognito. Or how should I modify my React? Any other suggestions are welcome.

Thanks!

2 Answers
0

Hi, maybe you can try change the file of script in the HTML page by .js in order to communicate with the react code

Also, I can share a document that could be helpful in your case https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/authenticate-react-application-users-by-using-amazon-cognito-and-aws-amplify.html

I expect it works!

AWS
answered 9 months ago
  • Change the file of script by .js does not work, because all my other function files are written in tsx format

  • Hi Wenhan, you may need to configure Apache or Ngnix and include the MIME type for *.mjs files. Use this in order to configure in a better way the web server

0

Have reviewed this post to see if this is the cause?

https://stackoverflow.com/questions/56632496/failed-to-load-module-script

profile picture
EXPERT
answered 9 months ago
  • It doesn't work. The post you shared is about Angular App, but mine is React. Do you have any other ideas?

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions