pockets – Webpack situation with tiny-secp256k1 and ECPair

I’m growing a browser extension utilizing Webpack v5 and incorporating the bitcoinjs-lib and ecpair libraries to create a Bitcoin pockets. Nevertheless, I’m encountering an error when trying to load the WebAssembly module.

I might significantly respect any steerage or strategies on easy methods to resolve this situation efficiently and instantiate the WebAssembly module in my browser extension.

Error Message:

Listed here are the important thing particulars of my setup:

• I’m utilizing Webpack v5 to bundle the appliance.
• I’ve included the bitcoinjs-lib and ecpair libraries as dependencies in my challenge.
• Error is happening when attempting to import tiny-secp256k1 and likewise when passing that occasion 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");

perform copyFolderSync(from, to) {
  fs.mkdirSync(to, { recursive: true });
  fs.readdirSync(from).forEach((component) => {
    if (component !== "manifest.json") {
      if (fs.lstatSync(path.be a part of(from, component)).isFile()) {
        fs.copyFileSync(path.be a part of(from, component), path.be a part of(to, component));
      } else {
        copyFolderSync(path.be a part of(from, component), path.be a part of(to, component));
      }
    }
  });
}

module.exports = {
  module: {
    guidelines: [
      {
        test: /.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        check: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          choices: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        check: /.wasm$/,
        kind: "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.faucet("AfterEmitPlugin", (compilation) => {
          // Run the JavaScript file after the compilation is completed
          exec("node growth/construct/index.js", (error, stdout, stderr) => {
            if (error) {
              console.error(`exec error: ${error}`);
              return;
            }
            // Copy recordsdata from the temp folder to different folders
            fs.readdirSync(path.resolve(__dirname, "dist")).forEach((dest) => {
              copyFolderSync("dist/chrome", `dist/${dest}`);
            });
          });
        });
      },
    },
  ],
};