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}`);
});
});
});
},
},
],
};
