Search code examples
javascriptreactjsamazon-web-servicesaws-amplifyaws-amplify-cli

AWS Amplify Tutorial React Web App Doesn't Load in Safari

I am following the tutorial at https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/ to create a React single-page-application with AWS Amplify.

I have successfully completed the first two modules, and have observed an issue which I would like to resolve in the third module. After following most of the steps in Module Three, I am able to run the app locally - but opening localhost in Safari shows only a white page. In Chrome, localhost shows the expected log-in screen. From opening the console in Safari, I see an error:

"TypeError: n.addEventListener is not a function. (In 'n.addEventListener("change", o)', 'n.addEventListener' is undefined)"

which I simply have no idea how to debug. I think it is an issue in one of the node packages. I would like to resolve this, as it is my plan to amend the HTML and CSS portions of the codebase to host a simple website - which will need to work on the most common browsers.

I have shared a screenshot below.

enter image description here

Solution

  • I managed to resolve this, you need to add a polyfil using: https://polyfill.io/v3/url-builder

    Add MediaQueryList.addEventListener and MediaQueryList.removeEventListener

    Then add the script tag to your HTML:

    <script src="https://polyfill.io/v3/polyfill.min.js?features=MediaQueryList.prototype.addEventListener%2CMediaQueryList.prototype.removeEventListener"></script>