React Select IE 11 - TypeError: Object doesn't support property or method 'assign'

Question

此代码有什么问题...IE 11 抛出 类型错误：对象不支持 属性 或方法 'assign'...chrome 表现良好

import React from 'react';

import Select,{components} from 'react-select';
import { colourOptions } from '../react-select_Samples/data.js';

const Option = props => { 
    return ( <div>
        <components.Option {...props}><input type="checkbox" checked={props.isSelected} onChange={() => null} />{props.label}
        </components.Option></div> ); 
    };
export class SampleDropdown extends React.Component {
    render() {       
        return (
            <Select
              className="basic-single"
              classNamePrefix="select"
              defaultValue={colourOptions[4]}
              isSearchable
              name="color"
              options={colourOptions}
              components={{ Option}}              
              hideSelectedOptions={false}
              isMulti
            />
        );
    }
}

这里是package.json ... 它有以下包 "bootstrap(^3.4.1), es6-promise-promise(^1.0.0), react(^16.8.6), react-bootstrap(^0.31.5), react-dom(^16.8.6), react-router-bootstrap(^0.25.0), react-router-dom(^5.0.0), react-scripts(3.0.0), react-select(^2.4.3), rimraf(^2.6.3), whatwg-fetch(^3.0.0"

{
  "name": "reports_react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.4.1",
    "es6-promise-promise": "^1.0.0",
    "react": "^16.8.6",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.8.6",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.0",
    "react-select": "^2.4.3",
    "rimraf": "^2.6.3",
    "whatwg-fetch": "^3.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Answer 1

在构建 React 应用程序（开发或生产）时，spread operations 正在转换为 Object.assign 作业。

一个解决方案是使用 babel-polyfill 包并在入口点的顶部导入（默认为 index.js）以确保正确的功能。

---

另一种解决方案是使用 yarn eject 弹出您的 React 应用程序，这将允许您配置应用程序的构建过程。您可能必须删除 node_modules 文件夹并重新安装您的软件包。

弹出后，您必须使用 yarn add @babel/plugin-transform-object-assign --dev 安装 @babel/plugin-transform-object-assign 软件包，并将以下内容添加到您的 package.json 属性 babel 下：

{
    ...
    "babel": {
        "presets": ["react-app"],
        "plugins": ["@babel/plugin-transform-object-assign"]
    }
    ...
}

或任何 babel 配置文件的以下内容：

{
    "presets": ["react-app"],
    "plugins": ["@babel/plugin-transform-object-assign"]
}

这将转换所有 Object.assign 以便它们可以在不受支持的环境（如 IE11）中使用。

此方法需要弹出，因为 facebook 具有其 create-react-app 内置配置以提供功能默认值。