How to address webpack5 errors in vue-cli when using webAuth?

Moralis General
#1
  1. I’m following instructions to use web3auth instead of wallet connect (https://docs.moralis.io/moralis-dapp/users/web3-login/web3auth). I’m using vue-cli which instead of creating a webpack.config.js uses a vue.config.js:
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
 
})

as soon as Install the webAuth npm package Vue is trowing 17 errors:

Screen Shot 2022-05-08 at 13.31.22
Screen Shot 2022-05-08 at 13.31.222512×1318 626 KB

I’m assuming it;s because Vue Cli uses the latests version of webpack (5) because I found this on Moralis page (https://www.npmjs.com/package/moralis):

Screen Shot 2022-05-08 at 13.32.28
Screen Shot 2022-05-08 at 13.32.281540×1014 55.2 KB

I’m unsure on how to translate the webpack.config.js instructions, to the vue.config.js instructions.

Screen Shot 2022-05-08 at 13.35.06
Screen Shot 2022-05-08 at 13.35.061572×830 71.8 KB

I know this is probably a basic JS thing but I’m stuck.
I’m also unsure on how to force vue-cli to use webpack4 instead, which could probably also solve my problem.

Is there anybody out there that could point me in the right direction?

many thanks in advance

#2

This seems to be working. It least it’s getting rid of the error messages when I do npm run serve:

module.exports = {
    resolve: {
        fallback: {
            assert: require.resolve('assert'),
            crypto: require.resolve('crypto-browserify'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            os: require.resolve('os-browserify/browser'),
            stream: require.resolve('stream-browserify'),
            "url": false,
           "assert": false
        },
    },
};

I’ve also had to install all these modules one by one and add a couple of other fallbacks. It serves without errors but when I call it form a function
get an error:

vue.runtime.esm.js:760 [Vue warn]: Error in v-on handler (Promise/async): "Error: "@web3auth/web3auth" not installed, please install

It seems like web3auth is still very picky with webpack4: Web3Auth.io x Moralis: "@web3auth/web3auth" not installed, please install

#3

Have you tried installing web3auth manually?