SPO自定义WebPart在Chrome、Edge运行正常，IE报defineProperty不支持错误

报错根因 #

你遇到的Object doesn't support property or method 'defineProperty'报错，核心原因为兼容垫片加载时机晚于依赖该API的代码执行，或项目依赖、SPFx版本本身不支持IE11运行。

排查解决步骤 #

• 调整垫片加载顺序
  import '@pnp/polyfill-ie11'必须放在WebPart入口ts文件所有import语句的第一行，禁止在引入其他第三方依赖后再加载垫片，否则第三方包先执行调用对应API会提前触发报错。
• 校验SPFx版本兼容性
  只有SPFx v1.10.0及更低版本原生支持IE11，若使用v1.11.0及更高版本，需要额外做如下配置：
  • 打开项目根目录tsconfig.json，将target属性值修改为es5，禁止使用es6及更高编译目标
  • 打开config/config.json，externals配置项禁止引入未做IE11兼容的第三方CDN资源，所有依赖尽量通过npm安装后本地打包
• 排查第三方依赖兼容性
  检查项目所有npm依赖的IE11支持情况，当前很多主流包的最新版本已移除IE11支持，需降级到兼容版本：
  • react/react-dom 降级到v16.x版本
  • lodash 降级到v4.17.21及以下版本
• 补充缺失的API垫片
  若调整pnp垫片后仍报错，可在入口文件最顶部额外引入对应API的垫片，代码如下：

  import 'core-js/es/object/define-property';
  import '@pnp/polyfill-ie11';
  // 其余所有import语句放在此处之后
  

额外注意事项 #

确认客户端IE11未强制开启低版本兼容视图，可在站点母版页添加<meta http-equiv="X-UA-Compatible" content="IE=edge">，强制IE使用最高版本文档模式运行。

内容的提问来源于stack exchange，提问作者popescu alexandra