'Proxy' is undefined in IE

Question

I have built an Excel add-in by React+Node+Umi. We have implemented our authentication system. The authentication works in Chrome and Safari, I just realized that it does not work well in IE11; F12 shows that 'Proxy' is undefined.

Although it is an Excel add-in, we could reproduce the error (and the same error message) just in browser. Open the link https://jsaddin.10studio.tech/welcome/?next=formulaEditor in IE 11, sign in with ID [email protected] and password: 123456. We could see the error message in F12.

Does anyone know

1. how to fix this?
2. how could I know which library/part of my code uses this Proxy? I may replace it by alternatives.

Edit 1: In .umirc.ts:

treeShaking: true,
targets: {
  ie: 9,
  safari: 9,
},

In package.json:

"umi": "^2.7.0",
"umi-plugin-react": "^1.8.0",
"umi-types": "^0.2.0"

Edit 2:

I tried yarn add proxy-polyfill, then yarn start. Curiously, it raised an error in localhost Invalid character and 'umi' is undefined:

Crupper

hi, i am also facing same issue, 'Proxy' is undefined. i have added import "@pnp/polyfill-ie11"; but still same issue. Any help please – Hayott

Answer 1

It looks like you are missing a polyfill. Did you check this config for umi.js? https://umijs.org/config/#targets

Setting the target of ie to 11 (as in the above link) should handle adding the polyfills you need.

  targets: {
    ie: 11,
    ...other browsers
  },
  ...rest of the config

LE:

In case there is an issue with umi.js you can try adding the needed polyfills yourself (e.g. here is one for Proxy https://github.com/GoogleChrome/proxy-polyfill)

Twitch

It is currently ie: 9 in .umirc.ts. As it is Configuring the minimum version of browsers you want to compatible with, it should be compatible with IE 11, right? – Crupper

@Crupper looks like there is an open issue about this in the Github repo of umi.js github.com/umijs/umi/issues/3985. I would suggest adding the polyfill yourself until the issue is resolved – Twitch

Oh, sorry, I didn't know that. Did you try adding the needed polyfill by yourself? – Twitch

I have not tried yet. I'm still trying to test the project on my local windows. Based on the readme, I should first Install via your favourite package manager as proxy-polyfill, then what does You should include proxy-polyfill into your build system (just require it directly, it doesn't export anything), or import the proxy.min.js file directly. mean? – Crupper

you can just do require('proxy-polyfill') somewhere at the root of your project (do you have an index.js file where you mount react?), after installing the package (do you use npm?) – Twitch

Or you can add the proxy.min.js inside node_modules to your html file, before other scripts are included. I'm not exactly sure of your setup, so I cannot say exactly how to include this file, you just need to put it somewhere in your project – Twitch

@Crupper also, I see you are using [email protected], can you try upgrading to the latest version? – Twitch

@Crupper any news on this? did you try adding the polyfill yourself? – Twitch

Thank you for asking, I have not tried yet. I will let you know... – Crupper

Please see my Edit 2 in OP. – Crupper

I see, does the error happen in other browsers as well or only IE? – Twitch

can you try setting the target for ie to 11 instead of 9? and for safari to 10? – Twitch