Module parse failed error when mediasoup is imported in React Js app

Question

I'm doing a videocall app using mediasoup, when i import mediasoup-client (

import { Device } from 'mediasoup-client';

) this error appears: Module parse failed You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (255:10) @ ./~/mediasoup-client/lib/index.js 32:17-36

I'm using node v18.12.1 npm 6.14.17 Python 3.8.10 GCC 9.4.0 mediasoup-client 3.6.50 "@expo/webpack-config": "^0.17.3", babel-loader: ^9.1.0

I tried change configuration of webpack, in webpack.config.js

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: ['mediasoup-client/lib']
        }
    }, argv);
    return config;
};

some posts said it could be for node and npm version, I did it and I checked all the requirements in package.json I added: "babel": { "presets": ["@babel/preset-env"] } I also tried

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path')

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync(env, argv);
    config.module.rules.forEach(r => {
        if (r.oneOf) {
            r.oneOf.forEach(o => {
                if (o.use && o.use.loader && o.use.loader.includes('babel-loader')) {
                    o.include = [
                        path.resolve('.'),
                        path.resolve('node_modules/mediasoup-client/lib'),
                    ]
                }
            })
        }
    })
    return config;
};

and

const path = require("path");
const webpack = require("webpack");
module.exports = {
    entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, "./src/"),
      filename: "[name].js",
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
          },
        }
      ],
    },
  };

I cleaned dependencies and installed them again, i removed cache and update webpack, but it doesnt work.

Module parse failed error when mediasoup is imported in React Js app

0 Answers0