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

Question

What is wrong with this code ...IE 11 throwing
TypeError: Object doesn't support property or method 'assign'...chrome is behaving fine
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
/>
);
}
}
here is package.json ...
it has following packages
"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

When the React app is being build (dev or prod), spread operations are being transformed into Object.assign assignments.
A solution would be to use the babel-polyfill package and import right at the top of your entry point (index.js by default) to ensure correct functionality.
Another solution is to eject your react app using yarn eject, which will allow you to configure the build procedure of your app. You might have to delete the node_modules folder and reinstall your packages.
After ejecting you have to install the #babel/plugin-transform-object-assign package using yarn add #babel/plugin-transform-object-assign --dev and add the following to your package.json under the attribute babel:
{
...
"babel": {
"presets": ["react-app"],
"plugins": ["#babel/plugin-transform-object-assign"]
}
...
}
or the following to any babel configuration file:
{
"presets": ["react-app"],
"plugins": ["#babel/plugin-transform-object-assign"]
}
This will transform all Object.assign so they can be used inside unsupported environments (like IE11).
Ejecting is necessary for this method as facebook has the configurations for their create-react-app built-in to provide functioning defaults.