Overview

Recently, I upgraded from mediasoup-client version 3.6.16 to 3.6.57 to utilize the new profile-level-id feature. However, I encountered build failures using webpack version 2.4.1 without making any changes to my existing code.

Environment Details

Here are the current dependencies in my project:

  • 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

Error Encountered

Upon attempting to build the project, I received the following 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

Investigation

After some investigation, I discovered that the build fails for any version of mediasoup-client after v3.6.45. This indicates a potential compatibility issue with my current webpack configuration or the babel settings.

Suggested Configuration Changes

To resolve the build issue, consider reviewing and updating your webpack.config.js file. Below is a sample configuration that may help:

const webpack = require('webpack');

module.exports = {
  entry: [
    './src/index.js',
    'babel-polyfill'
  ],
  output: {
    path: __dirname,
    publicPath: './',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/, // Exclude node_modules from babel-loader
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-1'] // Ensure presets are up to date
        }
      },
      { test: /.css$/, loader: 'style-loader!css-loader' } // CSS loader
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'] // Resolve JS and JSX files
  },
  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') // Set environment to production
      }
    }),
    // new webpack.optimize.UglifyJsPlugin() // Uncomment for minification
  ]
};

Conclusion

If you continue to experience issues after making these adjustments, consider checking for updates to your dependencies or reviewing the Mediasoup documentation for any breaking changes introduced in the newer versions. This should help in resolving the build errors and allow you to successfully compile your project.