<p>Although my error was different, I recently could not use tiny-secp256k1 in my Nuxt project.</p>
<p>I found out that the library can be easily replaced with <a href="https://github.com/bitcoinerlab/secp256k1" rel="nofollow noreferrer">@bitcoinerlab/secp256k1</a> that is more widely supported.</p>
<p><a href="https://github.com/junderw" rel="nofollow noreferrer">Jonathan Underwood</a>, developer of bitcoinjs-lib and tiny-secp256k1, <a href="https://github.com/bitcoinjs/tiny-secp256k1/issues/116#issuecomment-1579516394" rel="nofollow noreferrer">confirmed</a> that the replacement should be fine.</p>
<p>You can try the same with:</p>
<pre><code>npm install @bitcoinerlab/secp256k1
</code></pre>
<p>And:</p>
<pre><code>import ecc from '@bitcoinerlab/secp256k1';
import { ECPairFactory } from 'ecpair';
const ECPair = ECPairFactory(ecc);
</code></pre>
<p>I hope this help.</p>

CC BY-SA 4.0
2023-06-17T06:38:16.603Z
2023-06-17T06:38:16.603Z
learntheropes
<p>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.</p>
<p>I would greatly appreciate any guidance or suggestions on how to resolve this issue successfully and instantiate the WebAssembly module in my browser extension.</p>
<p>Error Message:</p>
<p><a href="https://i.sstatic.net/n7Npa.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/n7Npa.png" alt="enter image description here" /></a></p>
<p>Here are the key details of my setup:</p>
<ul>
<li>I am using Webpack v5 to bundle the application.</li>
<li>I have included the bitcoinjs-lib and ecpair libraries as dependencies in my project.</li>
<li>Error is occurring when trying to import tiny-secp256k1 and also when passing that instance to ECPairFactory.</li>
</ul>
<p><a href="https://i.sstatic.net/nNvQd.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/nNvQd.png" alt="enter image description here" /></a></p>
<p>My webpack.config.js file:</p>
<pre><code>const path = require(&quot;path&quot;);
const CopyPlugin = require(&quot;copy-webpack-plugin&quot;);
const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
const { exec } = require(&quot;child_process&quot;);
const fs = require(&quot;fs&quot;);

function copyFolderSync(from, to) {
  fs.mkdirSync(to, { recursive: true });
  fs.readdirSync(from).forEach((element) =&gt; {
    if (element !== &quot;manifest.json&quot;) {
      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: [&quot;style-loader&quot;, &quot;css-loader&quot;, &quot;sass-loader&quot;],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: &quot;babel-loader&quot;,
          options: {
            presets: [&quot;@babel/preset-env&quot;, &quot;@babel/preset-react&quot;],
          },
        },
      },
      {
        test: /\.wasm$/,
        type: &quot;webassembly/async&quot;, // or &quot;webassembly/sync&quot;
      },
    ],
  },
  experiments: {
    asyncWebAssembly: true,
  },
  resolve: {
    extensions: [&quot;.js&quot;, &quot;.jsx&quot;],
    fallback: {
      buffer: require.resolve(&quot;buffer&quot;),
      stream: require.resolve(&quot;stream-browserify&quot;),
    },
  },
  entry: {
    background: &quot;./app/background.js&quot;,
    popup: &quot;./app/popup.js&quot;,
  },
  output: {
    path: path.resolve(__dirname, &quot;dist/chrome&quot;),
    filename: &quot;[name].js&quot;,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: &quot;./app/popup.html&quot;,
      filename: &quot;popup.html&quot;,
      chunks: [&quot;popup&quot;],
    }),
    new CopyPlugin({
      patterns: [
        {
          from: &quot;app&quot;,
          to: &quot;&quot;,
          globOptions: {
            ignore: [
              &quot;**/background.js&quot;,
              &quot;**/popup.js&quot;,
              &quot;**/popup.html&quot;,
              &quot;**/build-types&quot;,
              &quot;**/manifest&quot;,
            ],
          },
        },
        {
          from: &quot;ui&quot;,
          to: &quot;ui&quot;,
        },
      ],
    }),
    {
      apply: (compiler) =&gt; {
        compiler.hooks.afterEmit.tap(&quot;AfterEmitPlugin&quot;, (compilation) =&gt; {
          // Run the JavaScript file after the compilation is done
          exec(&quot;node development/build/index.js&quot;, (error, stdout, stderr) =&gt; {
            if (error) {
              console.error(`exec error: ${error}`);
              return;
            }
            // Copy files from the temp folder to other folders
            fs.readdirSync(path.resolve(__dirname, &quot;dist&quot;)).forEach((dest) =&gt; {
              copyFolderSync(&quot;dist/chrome&quot;, `dist/${dest}`);
            });
          });
        });
      },
    },
  ],
};
</code></pre>

CC BY-SA 4.0
2023-06-13T14:39:45.753Z
I’m voting to close this question because the error message is quite generic, almost surely not caused by any software related to Bitcoin.
Mercedes
CC BY-SA 4.0
2023-06-13T16:23:53.690Z
I understand that the error message may appear generic and not directly related to Bitcoin software. However, the error occurs consistently when trying to import the tiny-secp256k1 library, which is essential for Bitcoin-related functionality.

I would greatly appreciate your guidance on how to proceed with either creating a Bitcoin wallet or resolving the specific issue I'm facing with the Content Security Policy restriction with Webpack. Any suggestions or insights you can provide would be immensely helpful in moving forward with my project.

Thank you for your understanding and support.
Vaibhav Patel
<wallet><bip32-hd-wallets><development><secp256k1><bitcoinjs>
Webpack issue with tiny-secp256k1 and ECPair
Vaibhav Patel
# Webpack issue with tiny-secp256k1 and ECPair

(Asked by: username_0 on 2023-06-13)

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:

[![enter image description here](https://i.sstatic.net/n7Npa.png)](https://i.sstatic.net/n7Npa.png)

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.

[![enter image description here](https://i.sstatic.net/nNvQd.png)](https://i.sstatic.net/nNvQd.png)

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

```

**Tags:** wallet, bip32-hd-wallets, development, secp256k1, bitcoinjs

> **Comments:**
> **username_1**: I’m voting to close this question because the error message is quite generic, almost surely not caused by any software related to Bitcoin.  
> **username_0**: I understand that the error message may appear generic and not directly related to Bitcoin software. However, the error occurs consistently when trying to import the tiny-secp256k1 library, which is essential for Bitcoin-related functionality.  I would greatly appreciate your guidance on how to proceed with either creating a Bitcoin wallet or resolving the specific issue I'm facing with the Content Security Policy restriction with Webpack. Any suggestions or insights you can provide would be immensely helpful in moving forward with my project.  Thank you for your understanding and support.  

---

## 1 answers

### Answer by username_2 on 2023-06-17. Score: 0

Although my error was different, I recently could not use tiny-secp256k1 in my Nuxt project.

I found out that the library can be easily replaced with [@bitcoinerlab/secp256k1](https://github.com/bitcoinerlab/secp256k1) that is more widely supported.

[Jonathan Underwood](https://github.com/junderw), developer of bitcoinjs-lib and tiny-secp256k1, [confirmed](https://github.com/bitcoinjs/tiny-secp256k1/issues/116#issuecomment-1579516394) that the replacement should be fine.

You can try the same with:

```
npm install @bitcoinerlab/secp256k1

```

And:

```
import ecc from '@bitcoinerlab/secp256k1';
import { ECPairFactory } from 'ecpair';
const ECPair = ECPairFactory(ecc);

```

I hope this help.


---

