I would greatly appreciate any guidance or suggestions on how to successfully resolve this issue and instantiate the WebAssembly module in a browser extension.

Error Message:

Here is an important detail of my setup.

• I’m using Webpack V5 to bundle my applications.
• I included the Bitcoinjs-Lib and the Ecpair library as dependencies for my project.
• When I try to import Tiny-SECP256K1, I also get an error when passing that instance to ecpairfactory.

My webpack.config.js file:

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { exec } = require("child_process");
const fs = require("fs");

function copyFolderSync(from, to) {
  fs.mkdirSync(to, { recursive: true });
  fs.readdirSync(from).forEach((element) => {
    if (element !== "manifest.json") {
      if (fs.lstatSync(path.join(from, element)).isFile()) {
        fs.copyFileSync(path.join(from, element), path.join(to, element));
      } else {
        copyFolderSync(path.join(from, element), path.join(to, element));
      }
    }
  });
}

module.exports = {
  module: {
    rules: (
      {
        test: /\.scss$/,
        use: ("style-loader", "css-loader", "sass-loader"),
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ("@babel/preset-env", "@babel/preset-react"),
          },
        },
      },
      {
        test: /\.wasm$/,
        type: "webassembly/async", // or "webassembly/sync"
      },
    ),
  },
  experiments: {
    asyncWebAssembly: true,
  },
  resolve: {
    extensions: (".js", ".jsx"),
    fallback: {
      buffer: require.resolve("buffer"),
      stream: require.resolve("stream-browserify"),
    },
  },
  entry: {
    background: "./app/background.js",
    popup: "./app/popup.js",
  },
  output: {
    path: path.resolve(__dirname, "dist/chrome"),
    filename: "(name).js",
  },
  plugins: (
    new HtmlWebpackPlugin({
      template: "./app/popup.html",
      filename: "popup.html",
      chunks: ("popup"),
    }),
    new CopyPlugin({
      patterns: (
        {
          from: "app",
          to: "",
          globOptions: {
            ignore: (
              "**/background.js",
              "**/popup.js",
              "**/popup.html",
              "**/build-types",
              "**/manifest",
            ),
          },
        },
        {
          from: "ui",
          to: "ui",
        },
      ),
    }),
    {
      apply: (compiler) => {
        compiler.hooks.afterEmit.tap("AfterEmitPlugin", (compilation) => {
          // Run the JavaScript file after the compilation is done
          exec("node development/build/index.js", (error, stdout, stderr) => {
            if (error) {
              console.error(`exec error: ${error}`);
              return;
            }
            // Copy files from the temp folder to other folders
            fs.readdirSync(path.resolve(__dirname, "dist")).forEach((dest) => {
              copyFolderSync("dist/chrome", `dist/${dest}`);
            });
          });
        });
      },
    },
  ),
};