低版本浏览器报错 Cannot redefine property: flat

Question

使用webpack打包后，在低版本浏览器（例如：Chrome 65.x）控制台报错：

Uncaught TypeError: Cannot redefine property: flat
at Function.defineProperty (<anonymous>)
at Object.<anonymous> (main.fe57ac0c.js:1)
at o (main.fe57ac0c.js:1)
at Object.<anonymous> (main.fe57ac0c.js:1)
at o (main.fe57ac0c.js:1)
at Object.<anonymous> (main.fe57ac0c.js:1)
at o (main.fe57ac0c.js:1)
at Module.<anonymous> (main.fe57ac0c.js:1)
at o (main.fe57ac0c.js:1)
at Object.<anonymous> (main.fe57ac0c.js:1)

该问题仅出现在生产环境，开发环境下没有问题。
已尝试过升级webpack及html-webpack-plugin的升级。
当前package.json文件如下。

{
"name": "react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@mapbox/mapbox-gl-language": "^0.10.1",
"@turf/turf": "^5.1.6",
"antd": "3.26.0",
"autoprefixer": "7.1.6",
"axios": "^0.19.0",
"babel-core": "6.26.0",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-plugin-import": "^1.12.0",
"babel-preset-react-app": "3.1.1",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"dva": "^2.1.0",
"dva-loading": "^1.0.4",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "2.2.1",
"eslint-plugin-flowtype": "2.39.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "4.2.0",
"fs-extra": "3.0.1",
"gsap": "^2.0.2",
"history": "^4.9.0",
"html-webpack-plugin": "4.0.0-beta.8",
"jest": "20.0.4",
"js-cookie": "^2.2.1",
"jwt-decode": "^2.2.0",
"mapbox-gl": "1.1.1",
"md5": "^2.2.1",
"mini-css-extract-plugin": "^0.8.0",
"mockjs": "^1.0.1-beta3",
"moment": "^2.24.0",
"numeral": "^2.0.6",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"rc-tween-one": "^2.4.1",
"react": "16.13.1",
"react-dev-utils": "9.0.3",
"react-dom": "16.13.1",
"react-intl-universal": "^2.0.4",
"react-keep-alive": "^2.1.0",
"react-router-dom": "^4.3.1",
"reqwest": "^2.0.5",
"resolve": "1.6.0",
"serve": "^11.3.2",
"style-loader": "0.19.0",
"styled-components": "^5.1.1",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack": "4.39.2",
"webpack-cli": "3.3.7",
"webpack-dev-server": "3.8.0",
"webpack-manifest-plugin": "2.0.4",
"whatwg-fetch": "2.0.3"
},
 "scripts": {
"start": "node scripts/start.js",
"build": "cross-env PUBLIC_URL='./' node scripts/build.js",
"precommit": "lint-staged",
"lint": "eslint --fix --ext .js --ext .jsx src mock",
"test": "node scripts/test.js --env=jsdom",
"ct": "git add . && git commit --no-verify -m",
"postct": "git pull && git push && git log"
},
"jest": {
"collectCoverageFrom": [
  "src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
  "<rootDir>/config/polyfills.js"
],
"testMatch": [
  "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
  "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
  "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
  "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
  "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
  "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
  "^react-native$": "react-native-web"
},
"moduleFileExtensions": [
  "web.js",
  "js",
  "json",
  "web.jsx",
  "jsx",
  "node",
  "mjs"
]
},
"babel": {
"presets": [
  "react-app"
],
"plugins": [
  [
    "babel-plugin-transform-decorators-legacy",
    {
      "legacy": true
    }
  ],
  [
    "import",
    {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    }
  ]
]
},
"eslintConfig": {
 "extends": "react-app"
 },
 "devDependencies": {
"babel-eslint": "10.0.1",
"babel-plugin-styled-components": "^1.10.7",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"cross-env": "^5.2.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-babel": "^5.2.1",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"husky": "^2.7.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"lint-staged": "^8.2.1",
"mockjs": "^1.0.1-beta3",
"uglifyjs-webpack-plugin": "^2.2.0",
"umi-mock-middleware": "^1.0.0"
},
"husky": {
"hooks": {
  "pre-commit": "lint-staged"
}
 },
 "lint-staged": {
"src/**/*.{js,jsx}": [
  "eslint --fix",
  "git add"
]
}
}

Answer 1

flat 是ES10的语法api，chorme最低需要69版本。
如果要低版本浏览器运行，建议数组循环迭代 手写flat api 实现。
https://developer.mozilla.org...