Error On Build after updating mediasoup-client to v3.6.46 and Above Version

mediasoup libraries
1

I was using mediasoup-client 3.6.16 and have updated to the latest version 3.6.57.
After updating I am not able to build. Using webpack (v2.4.1) to build.

Dependencies:

  • Node: v16.13.2
  • NPM: 8.1.2
  • React: 16.8.4
  • React-Dom: 16.8.4
  • Webpack: 2.4.1
  • babel-core: 6.2.1
  • babel-loader: 6.2.0
  • babel-preset-es2015: 6.1.18
  • babel-preset-react": 6.1.18
  • babel-polyfill: 6.26.0

Getting this error:

ERROR in ./~/mediasoup-client/lib/handlers/Chrome74.js
Module parse failed: /home/notabot/Downloads/broadcasting_project/node_modules/mediasoup-client/lib/handlers/Chrome74.js Unexpected token (132:12)
You may need an appropriate loader to handle this file type.
|             rtcpMuxPolicy: 'require',
|             sdpSemantics: 'unified-plan',
|             ...additionalSettings
|         }, proprietaryConstraints);
|         // Handle RTCPeerConnection connection status.
 @ ./~/mediasoup-client/lib/Device.js 34:19-49
 @ ./~/mediasoup-client/lib/index.js
 @ ./src/components/page/assistant/assistant-main.js
 @ ./src/components/page/teacher/app.js
 @ ./src/index.js
 @ multi ./src/index.js babel-polyfill

The need for updating the mediasoup-client was using the feature profile-level-id
Thus updated to the latest version, however, as soon as I updated to v3.6.57 and made no change to code, and tried to build it fails.

Then tried backtracking and found that after version v3.6.45 I am not able to create the build.

Just wanted to know what I am doing wrong that has resulted in an issue in creating the build and how to correct it.

Additions Information:
Importing format: import { Device } from “mediasoup-client”
webpack.config.js:

const webpack = require("webpack");
module.exports = {
  entry: [
    './src/index.js',
    'babel-polyfill'
  ],
  output: {
    path: __dirname,
    publicPath: './',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      },
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  devServer: {
    inline: false,
    historyApiFallback: true,
    contentBase: './'
  },
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    // new webpack.optimize.UglifyJsPlugin()
 ]
};