Estoy desarrollando una extensión del navegador utilizando Webpack V5 e incorporando las bibliotecas Bitcoinjs-Lib y Ecpair para crear una billetera Bitcoin. Sin embargo, me encuentro con un error al intentar cargar el módulo WebAssembly.
Apreciaría enormemente cualquier guía o sugerencia sobre cómo resolver este problema con éxito e instanciar el módulo de WebAssembly en la extensión de mi navegador.
Mensaje de error:
Aquí están los detalles clave de mi configuración:
- Estoy usando Webpack V5 para agrupar la aplicación.
- He incluido las bibliotecas bitcoinjs-lib y Ecpair como dependencias en mi proyecto.
- Se produce un error al intentar importar Tiny-SECP256K1 y también al pasar esa instancia a EcpairFactory.
Mi archivo webpack.config.js:
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: (
{
check: /.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: "(title).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 improvement/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}`);
});
});
});
},
},
),
};
