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 Risposte
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
con risposta 9 mesi fa
  • 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
ESPERTO
con risposta 9 mesi fa
  • It doesn't work. The post you shared is about Angular App, but mine is React. Do you have any other ideas?

Accesso non effettuato. Accedi per postare una risposta.

Una buona risposta soddisfa chiaramente la domanda, fornisce un feedback costruttivo e incoraggia la crescita professionale del richiedente.

Linee guida per rispondere alle domande