Error while trying to import stompjs in a React application that is using webpack

Question

I am building a modular federation React app that is subscribing to one of my topics from my backend using STOMP (SockJS) but whenever I try to import stompjs in one of my React components, it gives me the following error

Module parse failed: Unexpected token (2:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| {
>   "name": "websocket",
|   "description": "Websocket Client & Server Library implementing the WebSocket protocol as specified in RFC 6455.",
|   "keywords": [

The component where I want to import stompjs

import React, { useState, useEffect } from 'react';
import { toast } from "react-toastify";
import useStore from "sideweb/store";
import SockJS from "sockjs-client";
import { over } from "stompjs"; // error when I import this

let stompClient = null;

const Notification = () => {
    const { token: storeToken } = useStore();

    useEffect(() => {
        let sock = new SockJS(`http://localhost:8083/notification/record?token=${storeToken}`);
        stompClient = over(sock);
        stompClient.connect({}, onConnected, onError);

        const onConnected = () => {
            stompClient.subscribe('/topic/records', onMessageReceived);
        }

        const onError = () => {}

        const onMessageReceived = (payload) => {
            let jsonPayload = JSON.parse(payload.body);
            toast.info(`${jsonPayload.username} set a new high score of ${jsonPayload.points} points!`, { position: "bottom-right" });
        }
    }, []);

    return (
        <div></div>
    )

}

export default Notification;

package.json

{
  "name": "mainweb",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "build:start": "cd dist && PORT=3000 npx serve",
    "start": "webpack serve --open --mode development",
    "start:live": "webpack serve --open --mode development --live-reload --hot"
  },
  "license": "MIT",
  "author": {
    "name": "Jack Herrington",
    "email": "[email protected]"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "autoprefixer": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.2.1",
    "postcss-loader": "^4.1.0",
    "style-loader": "^3.3.0",
    "webpack": "^5.57.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.3.1",
    "tailwindcss": "^2.0.2"
  },
  "dependencies": {
    "@babel/runtime": "^7.13.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",

    "sockjs-client": "^1.6.1",
    "stompjs": "^2.3.3",
    "net": "^1.0.2",
    "axios": "^1.6.2",
    "zustand": "^4.4.7",
    "react-loader-spinner": "^5.4.5",
    "react-router-dom": "^6.20.1",
    "react-toastify": "^9.1.3"
  }
}

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

const deps = require("./package.json").dependencies;
module.exports = (_, argv) => ({
  output: {
    publicPath: "http://localhost:3000/",
  },

  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 3000,
    historyApiFallback: true,
  },

  module: {
    rules: [
      {
        test: /\.m?js/,
        type: "javascript/auto",
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.(css|s[ac]ss)$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },

  plugins: [
    new ModuleFederationPlugin({
      name: "mainweb",
      filename: "remoteEntry.js",
      remotes: {
        sideweb: "sideweb@http://localhost:3001/remoteEntry.js",
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
});

The app was generated using npx create-mf-app by Jack Herrington. When I am creating a normal React application using npm create-react-app, i don't encounter any problem when importing stompjs .