I’m creating a browser extension utilizing Webpack v5 and incorporating the bitcoinjs-lib and ecpair libraries to create a Bitcoin pockets. Nonetheless, I’m encountering an error when making an attempt to load the WebAssembly module.
I might drastically respect any steering or solutions on tips on how to resolve this subject efficiently and instantiate the WebAssembly module in my browser extension.
Error Message:
Listed below are the important thing particulars of my setup:
- I’m utilizing Webpack v5 to bundle the applying.
- I’ve included the bitcoinjs-lib and ecpair libraries as dependencies in my mission.
- Error is going on 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((aspect) => {
if (aspect !== "manifest.json") {
if (fs.lstatSync(path.be part of(from, aspect)).isFile()) {
fs.copyFileSync(path.be part of(from, aspect), path.be part of(to, aspect));
} else {
copyFolderSync(path.be part of(from, aspect), path.be part of(to, aspect));
}
}
});
}
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$/,
sort: "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 finished
exec("node growth/construct/index.js", (error, stdout, stderr) => {
if (error) {
console.error(`exec error: ${error}`);
return;
}
// Copy information from the temp folder to different folders
fs.readdirSync(path.resolve(__dirname, "dist")).forEach((dest) => {
copyFolderSync("dist/chrome", `dist/${dest}`);
});
});
});
},
},
],
};
