This topic was originally posted by guillaume on 8/31/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.
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.
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.
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",
})
);
},
});
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.
Archived Content from Web3Auth Community