issue after installing the package

[Loque18]

Hello, I'm integrating venom wallet to an already existing website, I am using this repo as a guide https://github.com/web3sp/inpage-provider-playground/blob/master/src/App.tsx

when I installed this package this error came out

environment
node: 16.x
package manager: yarn
everscale-standalone-client version: 2.1.18

help would be so much appreciated, thanks!

the code is the following

import React from "react";

import { VenomConnect } from "venom-connect";
import { ProviderRpcClient } from "everscale-inpage-provider";
import {
  ConnectionProperties,
  EverscaleStandaloneClient,
} from "everscale-standalone-client";

const getNetworkData = (checkNetworkId, field) => {
  switch (checkNetworkId) {
    case 1000:
      return NETWORKS.venomTestnet[field];

    case 1:
    default:
      return NETWORKS.venom[field];
  }
};

const NETWORKS = {
  venom: {
    name: "Venom Mainnet",
    checkNetworkId: 1,
    connection: {
      id: 1,
      group: "venom_mainnet",
      type: "jrpc",
      data: {
        endpoint: "https://jrpc.venom.foundation/rpc",
      },
    },
  },
  venomTestnet: {
    name: "Venom Testnet",
    checkNetworkId: 1000,
    connection: {
      id: 1000,
      group: "venom_testnet",
      type: "jrpc",
      data: {
        endpoint: "https://jrpc-testnet.venom.foundation/rpc",
      },
    },
  },
};

const standaloneFallback = (checkNetworkId = 1000) =>
  EverscaleStandaloneClient.create({
    connection: getNetworkData(checkNetworkId, "connection"),
  });

const initVenomConnect = async (checkNetworkId = 1000) => {
  return new VenomConnect({
    theme: "light",
    checkNetworkId: checkNetworkId,
    providersOptions: {
      venomwallet: {
        walletWaysToConnect: [
          {
            // NPM package
            package: ProviderRpcClient,
            packageOptions: {
              fallback:
                VenomConnect.getPromise("venomwallet", "extension") ||
                (() => Promise.reject()),
              forceUseFallback: true,
            },
            packageOptionsStandalone: {
              fallback: standaloneFallback,
              forceUseFallback: true,
            },
            id: "extension",
            type: "extension",
          },
        ],
        defaultWalletWaysToConnect: ["mobile", "ios", "android"],
      },
    },
  });
};

function TestComponent() {
  const OnInitBtnClick = async () => {
    const venomConnect = await initVenomConnect();
  };

  return (
    <section>
      <button onClick={OnInitBtnClick}>Connect venom</button>
    </section>
  );
}

export default TestComponent;

[Rexagon]

Which bundler does the existing site use?

You might need to add a wasm-loader in case of webpack 4.x, or update to the latest in case of webpack 5.x (it should work with wasm without additional loaders)

[Loque18]

Which bundler does the existing site use?

You might need to add a wasm-loader in case of webpack 4.x, or update to the latest in case of webpack 5.x (it should work with wasm without additional loaders)

Thanks for your response, I am using create-react-app

[Loque18]

I found the issue, it was due to the project dependencies, it was using an old version of react scripts (4.x) that didn't allow the app to load a wasm file (from nekotom_wasm) that is needed by this package