Button Group does not work on ie11

[prousseau-korem]

Description

The ButtonGroup component throw an exception when used in Internet explorer 11

Reproduction Steps

index.js

import ReactDOM from "react-dom";
import React from "react";
import ButtonGroup from '@tds/core-button-group'

const OPTIONS = [
    {value: "64gb", label: "64 GB"},
    {value: "128gb", label: "128 GB"},
    {value: "256gb", label: "256 GB"},
]

function App() {
    const [value, setValue] = React.useState(null)

    const onChange = event => {
        setValue(event.target.value)
    }

    return (
        <ButtonGroup
            name="storageSize"
            onChange={onChange}
            value={value}
            label="Please select a storage size"
        >
            {OPTIONS.map(o => (
                <ButtonGroup.Item key={o.value} value={o.value}>{o.label}</ButtonGroup.Item>
            ))}
        </ButtonGroup>
    )
}

ReactDOM.render(
    <div>
        <App/>
    </div>,
    document.getElementById("root"));

package.json

{
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development"
  },
  "dependencies": {
    "@tds/core-button-group": "^3.1.4",
    "core-js": "^3.10.2",
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "styled-components": "^5.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/preset-env": "^7.14.1",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.4",
    "style-loader": "^2.0.0",
    "webpack": "^5.37.0",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

webpack.config.js

const path = require('path');

module.exports = () => {
    return {
        entry: "./index.js",
        output: {
            path: __dirname,
            filename: "index.min.js"
        },
        target: ['web', 'es5'],
        devtool: 'inline-source-map',
        devServer: {
            hot: false,
            compress: true,
            liveReload: false,
            port: 8091,
        },

        module: {
            rules: [
                {
                    use: 'babel-loader',
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/
                },
                {
                    use: ['style-loader', 'css-loader'],
                    test: /\.css$/
                },
            ]
        }
    }
}

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "ie >= 11"
          ]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

Workaround details

No workaround

Recommendation

• Your recommendation here

Meta

• TDS component version: check package.json ^
• Willing to develop solution: No
• High impact: Yes

Screenshots

[nadaltelus]

ie reached end-of-life 15 june 2022.