ethersRPC not working with vuejs

Help - Plug n Play PnP Web SDKs
1

Hello,

The example provided by Web3Auth is not working when trying to run it with ethersRPC.ts instead of web3RPC.ts.

I have the following error with npm run serve:

 ERROR  Failed to compile with 14 errors                                                                                                                                                          2:08:03 PM

 error  in ./node_modules/ethers/lib.esm/abi/abi-coder.js

Syntax Error: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.
  108 |  */
  109 | export class AbiCoder {
> 110 |     #getCoder(param) {
      |     ^
  111 |         if (param.isArray()) {
  112 |             return new ArrayCoder(this.#getCoder(param.arrayChildren), param.arrayLength, param.name);
  113 |         }
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)

I saw that "@babel/plugin-transform-private-methods": "^7.22.5", is already in package.json but it seems that it is not loaded with babel. I tried this in babel.config.js.

module.exports = {
  // presets: ["@vue/cli-plugin-babel/preset"],
  presets: ["@vue/cli-plugin-babel/preset", "@babel/plugin-transform-private-methods"],
};

But I get the following error:

 ERROR  Error: Cannot find module '@babel/preset-plugin-transform-private-methods'
        Require stack:
        - /Users/Documents/gitlab/web3Auth/w3a-modal-evm-vue/node_modules/@babel/core/lib/config/files/plugins.js
        - /Users/Documents/gitlab/web3Auth/w3a-modal-evm-vue/node_modules/@babel/core/lib/config/files/index.js
        - /Users/Documents/gitlab/web3Auth/w3a-modal-evm-vue/node_modules/@babel/core/lib/index.js
        - /Users/Documents/gitlab/web3Auth/w3a-modal-evm-vue/node_modules/@vue/cli-plugin-babel/index.js
        - /Users/Documents/gitlab/web3Auth/w3a-modal-evm-vue/node_modules/@vue/cli-service/lib/Service.js
        - /Users/Documents/gitlab/web3Auth/w3a-modal-evm-vue/node_modules/@vue/cli-service/bin/vue-cli-service.js
        - If you want to resolve "@babel/plugin-transform-private-methods", use "module:@babel/plugin-transform-private-methods"
        - Did you accidentally pass a plugin as a preset?
        
        Make sure that all the Babel plugins and presets you are using
        are defined as dependencies or devDependencies in your package.json
        file. It's possible that the missing plugin is loaded by a preset
        you are using that forgot to add the plugin to its dependencies: you
        can workaround this problem by explicitly adding the missing package
        to your top-level package.json.

Do you have an idea how I could make it working ?

Regards.

2

@guillaume Thanks for your continued patience.

You’d need to create webpack, config the app directory named as config-overrides.js. The file should have the following config:

const { defineConfig } = require("@vue/cli-service");
const { ProvidePlugin } = require("webpack");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: (config) => {
    config.devtool = "source-map";
    config.resolve.symlinks = false;
    config.resolve.fallback = {
      crypto: false, // crypto-browserify can be polyfilled here if needed
      stream: false, // stream-browserify can be polyfilled here if needed
      assert: false, // assert can be polyfilled here if needed
      os: false, // os-browserify can be polyfilled here if needed
      https: false, // https-browserify can be polyfilled here if needed
      http: false, // stream-http can be polyfilled here if needed
      url: false, // url can be polyfilled here if needed
      zlib: false, // browserify-zlib can be polyfilled here if needed
    };
    config.plugins.push(new ProvidePlugin({ Buffer: ["buffer", "Buffer"] }));
    config.plugins.push(new ProvidePlugin({ process: ["process/browser"] }));
    config.plugins.push(
      new BundleAnalyzerPlugin({
        analyzerMode: "disabled",
      })
    );
  },
});
3

@vjgee

The vue.config.js is the following in the example:

const { defineConfig } = require("@vue/cli-service");
const { ProvidePlugin } = require("webpack");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: (config) => {
    config.devtool = "source-map";
    config.resolve.symlinks = false;
    config.resolve.fallback = {
      crypto: false,
      stream: false,
      assert: false,
      os: false,
      https: false,
      http: false,
      url: false,
      zlib: false,
    };
    config.plugins.push(new ProvidePlugin({ Buffer: ["buffer", "Buffer"] }));
    config.plugins.push(new ProvidePlugin({ process: ["process/browser"] }));
    config.plugins.push(
      new BundleAnalyzerPlugin({
        analyzerMode: "disabled",
      })
    );
  },
});

It is the same as you answer though create an overrided file does not change anything. Could you maybe try to make a working example with ethersJS within the repo ? I guess It would be useful for a lot of people.

Best regards.

1 Like
4

I have forwarded your request to our Dev team and will get back with an update once more information is available.

5

@guillaume Fixed the issue with the example here. Let me know if this works for you so that we can close this thread.

6

@maharshi everything seems to work correctly many thanks !

1 Like