我怎样才能将对话框和polyfill集成到我的React应用程序中？

Question

I'm using Firebase and FirebaseUI in my React app for phone number registration. As you can see at http://brigadesaffinitywebapp-dev.herokuapp.com it works well on Google Chrome desktop but as soon as I try to use another navigator the country code selector doesn't work and throws an error : undefined is not an object (evaluating 'window.dialogPolyfill.registerDialog') . So I guess I need to integrate https://github.com/GoogleChrome/dialog-polyfill but I'm having a hard time figuring out how.

I tried to npm install dialog-polyfill and then import dialogPolyfill from 'dialog-polyfill but I still get the error. Maybe it has something to do with the fact that I'm not currently attaching the instance to the window object ?

Answer 1

I guess there is no reasons to complicate things... Just had to put this a the top of index.html

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.7/dialog-polyfill.js"></script>

<script>
  var dialog = document.querySelector('dialog');
  dialogPolyfill.registerDialog(dialog);
  // Now dialog acts like a native <dialog>.
  dialog.showModal();
</script>