Webpack issue with tiny-secp256k1 and ECPair

I am developing a browser extension using Webpack v5 and incorporating the bitcoinjs-lib and ecpair libraries to create a Bitcoin wallet. However, I am encountering an error when attempting to load the WebAssembly module.

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

Error Message:

Here are the key details of my setup:

• I am using Webpack v5 to bundle the application.
• I have included the bitcoinjs-lib and ecpair libraries as dependencies in my project.
• Error is occurring when trying to import tiny-secp256k1 and also 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}`);
            });
          });
        });
      },
    },
  ],
};

Source link