e is not a constructor - WalletConnectProvider model not working

Question

Metamask is working perfectly.

BinanceChainWallet is working perfectly.

WalletConnect provider (model: QR - desktop/mobile wallet support), not working when I click on Wallet-Connect model on the front-end it give me this error only.

Platform on: Framework: Laravel 8.0 JS

The problem is in this file (LaravelWeb3Scripts.php/walletconnect.ts) - this file is the one used for getting providers models.

Vendor/Provider used https://github.com/sawirricardo/laravel-web3

Wallet-Connect Model repo https://github.com/WalletConnect/web3modal/blob/master/docs/providers/walletconnect.md

Console Log error (Chrome Developer Tools):

Uncaught (in promise) TypeError: e is not a constructor
at walletconnect.ts:31:22
at tslib.es6.js:100:1
at Object.next (tslib.es6.js:81:45)
at tslib.es6.js:74:1
at new Promise (<anonymous>)
at Module.A (tslib.es6.js:70:1)
at walletconnect.ts:15:44
at new Promise (<anonymous>)
at t.default (walletconnect.ts:15:10)
at e.<anonymous> (providers.ts:201:30)

walletconnect.ts - providers.ts - tslib.es6.js are imported from cdns

File: walletconnect.ts

import { IAbstractConnectorOptions, getChainId } from "../../helpers";

export interface IWalletConnectConnectorOptions
extends IAbstractConnectorOptions {
   infuraId?: string;
   rpc?: { [chainId: number]: string };
   bridge?: string;
   qrcode?: boolean;
}

const ConnectToWalletConnect = (
  WalletConnectProvider: any,
  opts: IWalletConnectConnectorOptions ) => {
     return new Promise(async (resolve, reject) => {
        let bridge = "https://bridge.walletconnect.org";
        let qrcode = true;
        let infuraId = "";
        let rpc = undefined;
        let chainId = 1;
        console.log('wallet connect'); // todo remove dev item
        if (opts) {
           bridge = opts.bridge || bridge;
           qrcode = typeof opts.qrcode !== "undefined" ? opts.qrcode : qrcode;
           infuraId = opts.infuraId || "";
           rpc = opts.rpc || undefined;
           chainId =
           opts.network && getChainId(opts.network) ? getChainId(opts.network) : 1;
        }

        const provider = new WalletConnectProvider({
           bridge,
           qrcode,
           infuraId,
           rpc,
           chainId
        });
        try {
           await provider.enable();
           resolve(provider);
        } catch (e) {
             reject(e);
          }
     });
  };

export default ConnectToWalletConnect;

File: LaravelWeb3Scripts.php

<?php

namespace Sawirricardo\LaravelWeb3\Components;

use Illuminate\View\Component;

class LaravelWeb3Scripts extends Component {
   /**
   * Create a new component instance.
   *
   * @return void
   */
   public function __construct() {
    //
   }

   /**
   * Get the view / contents that represent the component.
   *
   * @return \Illuminate\Contracts\View\View|\Closure|string
   */
   public function render() {
    return <<<'blade'

<script>
   class LaravelWeb3 {
      constructor() {
         this._provider = null;
         this.reloadAfterFetching = true;
         this.alertUserIfMetamaskIsNotInstalled = true;
         this.contracts = @json(config('web3.contracts'));
         this.web3ModalOptions = {
           cacheProvider: true,
           disableInjectedProvider: false,
           providerOptions: {
              binancechainwallet: {
                 package: true
              },
              walletconnect: {
                 package: WalletConnectProvider,
                 options: {
                    infuraId: "*********// hidden for post",
                 },
              },
           },
        };
     }

     async onConnect() {
        try {
           const web3Modal = this.prepareWeb3Modal();
           const provider = await web3Modal.connect();
           provider.on("accountsChanged", async (accounts) => {
              console.log("accountsChanged", accounts);
              web3Modal.clearCachedProvider();
              await this.fetchAccount(provider);
              if (this.reloadAfterFetching) window.location.reload();
           });
           provider.on("chainChanged", async (chainId) => {
              console.log("chainChanged", chainId);
              web3Modal.clearCachedProvider();
              await this.fetchAccount(provider);
              if (this.reloadAfterFetching) window.location.reload();
           });
           provider.on("connect", ( { chainId }) => {
              console.log("connect", chainId);
           });

           provider.on("disconnect", ( { code, message }) => {
              console.log("disconnect", code, message);
           });
           await this.fetchAccount(provider);
           if (this.reloadAfterFetching) window.location.reload();
        } catch (e) {
             console.log({ e });
          }
     }

     async fetchAccount(web3Provider) {
        const provider = new ethers.providers.Web3Provider(web3Provider);
        const message = await(await(await fetch("/_web3/users/signature", {
           method: "get",
           headers: {
              "Content-Type": "application/json",
              "X-CSRF-Token": "{{ csrf_token() }}",
           },
         })).json()).message;
         await fetch("/_web3/users",{
            method:'post',
            body: JSON.stringify({
               signature: await provider.getSigner().signMessage(message),
               address: await provider.getSigner().getAddress(),
            }),
            headers: {
               "Content-Type": "application/json",
               "X-CSRF-Token": "{{ csrf_token() }}",
            },
         })
         this._provider = provider;
      }

      async onDisconnect() {
         this._provider = null;
         const web3Modal = this.prepareWeb3Modal();
         await web3Modal.clearCachedProvider();
         await fetch("/_web3/users/logout",{
            method: "delete",
            headers: {
               "Content-Type": "application/json",
               "X-CSRF-Token": "{{ csrf_token() }}",
            },
         });
         if (this.reloadAfterFetching) window.location.reload();
      }

      async getProvider() {
         if (!this._provider) {
            const web3Modal = this.prepareWeb3Modal();
            const web3Provider = await web3Modal.connect();
            this._provider = new ethers.providers.Web3Provider(web3Provider);
         }
         return this._provider;
      }

      prepareWeb3Modal () {
         let Web3Modal, WalletConnectProvider;
         // if (!(window.web3 || window.ethereum) && this.alertUserIfMetamaskIsNotInstalled) {
            // alert(`Please install Metamask first`);
            // return;
         // }
         if (window.Web3Modal.default) {
            Web3Modal = window.Web3Modal.default;
         }
         if (window.WalletConnectProvider) {
            WalletConnectProvider = window.WalletConnectProvider.default;
         }
         const web3Modal = new Web3Modal(this.web3ModalOptions);
         return web3Modal;
      }

      addContract(address,contract) {
         this.contracts = [...this.contracts, { address, contract }];
      }
   }

   window.laravelWeb3 = new LaravelWeb3(); 
</script>
blade;
 }
}