Internet Explorer problem

[relense]

Im using the modal and everything is okay in every browser except for IE.

Im' using Internet Explorer 11 to test and when I try and use it does nothing.

Anyone had this issue or know what it might be?

[diasbruno]

Hi @relense, any information on the console? Which version of react-modal are using?

[relense]

Hey, Im using the 1.9.7 version of react modal. There are no console log everything looks fine. This happens after I use react-file-reader-input. After the user chooses a foto it should trigger the onChange function. But for some reason in ie 11 doesn't do anything.

[tansongyang]

I might be having the same issue. In IE11, I get a syntax error. After some investigation, I found this in lib/components/Modal.js:

  getDefaultProps: function () {
    return {
      isOpen: false,
      portalClassName: 'ReactModalPortal',
      ariaHideApp: true,
      closeTimeoutMS: 0,
      shouldCloseOnOverlayClick: true,
      parentSelector: () => document.body
    };
  },

You can see that parentSelector is an arrow function, which is unsupported in IE11.

I've seen this on versions 2.0.1, 1.9.7, and 1.6.0.

[diasbruno]

@tansongyang Probably a missing transform :(. Can you validate if this happens on versions 2.0.1+?

[tansongyang]

@diasbruno The issue appears to go away in 2.2.2. Would you like me to check other versions as well?

[diasbruno]

@relense @tansongyang Awesome. If you have sometime to have a look on this, you can check if versions 2.2.1 is ok, if so, update to the versions 2.x.y of react-modal is the best fix.

@tansongyang Thank you.

[relense]

Thanks all for the help, even with the update it didnt work. Ill try something else. If I solve it, ill comment here

[diasbruno]

@relense You can check if there is any cache on npm or something (after the update) or if you can get a small example showing the issue it would help.

[tansongyang]

@diasbruno 2.2.1 works for me as well.

[diasbruno]

@tansongyang Thank you!

[doctor3397]

I have react-modal 3.10.1 and I'm also running into the issue where the Modal is not rendering on IE. Any suggestion? Thank you.

[doctor3397]

Thanks all for the help, even with the update it didnt work. Ill try something else. If I solve it, ill comment here

Hi @relense, did you resolve this issue? I'm running into the same problem and I'm using react-modal 3.10.1

[diasbruno]

Hi @doctor3397, can you confirm that the dom elements of the modal are been rendered, please?

[doctor3397]

Hi @diasbruno, the IE issue is now resolved after I updated the babel.config.js and the webpack.config.js files. Thank you for your help.

[diasbruno]

@doctor3397 Thanks! Probably we are building with some javascript features that are not available on IE (?). Have you added any plugins on your babel configuration?

[linzhu02]

Hi @doctor3397 , do you mind share what updates you have to make on babel.config.js and webpack.config.js files?

I am having the same issue and also using react-modal 3.10.1 Thanks!

@diasbruno Do you know how to fix this?

[doctor3397]

Hi @linzhu02, @diasbruno I added @babel/polyfill and browserslist to package.json file. Hope this helps!

• babel.config.js

  const browserslist = require('browserslist');
  const browsers = browserslist();
  
    [
      '@babel/preset-env',
      {
        targets: { browsers },
        modules: false
      }
    ],

• webpack.config.js

  const webpackConfig = {
  entry: ['@babel/polyfill', './src/server'],
  ...