NextJS: Can't resolve 'magic-sdk' and '@walletconnect/web3-provider'

New Bug Report

WIth a new nextjs project, running yarn dev or npm run dev results in immediate warnings:

warn  - ./node_modules/moralis/lib/browser/Web3Connector/MagicWeb3Connector.js
Module not found: Can't resolve 'magic-sdk' in '/<project-path>/node_modules/moralis/lib/browser/Web3Connector'

Checklist

• I am not disclosing a vulnerability.
• I have searched through existing issues and the Moralis Forum.
• I can reproduce the issue with the latest react-moralis release, latest SDK release, and my server is updated to the latest version.

Issue Description

yarn create next-app
yarn add moralis react-moralis

Then, update your _app.js file to look something like:

import { MoralisProvider } from "react-moralis"

function App({ Component, pageProps }) {
  return (
    <MoralisProvider initializeOnMount={false}>
      <Component {...pageProps} />
    </MoralisProvider>
  )
}

export default App

Then run:

yarn dev

And you’ll see the warnings. If you go ahead and add that package, you then get it complaining about not finding @walletconnect/web3-provider

Actual Outcome

warn  - ./node_modules/moralis/lib/browser/Web3Connector/MagicWeb3Connector.js
Module not found: Can't resolve 'magic-sdk' in '/<project-path>/node_modules/moralis/lib/browser/Web3Connector'

Expected Outcome

No warnings

Environment

    "moralis": "^1.2.3",
    "next": "12.0.9",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-moralis": "^1.2.1"

macos Monterey 12.1 yarn: 1.22.17

Server - N/A

[Kipitup]

Hello,

I also have this issue, but I’m not using NextJS, only classic React.

[theitaliandev]

Since these are optional dependencies and these warnings comes from Webpack 5 (in Next.js v. 12 the support for Webpack 4 was removed) I’ve got rid of them by customising webpack config in next.config.js as follow:

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
      config.ignoreWarnings = [
        {
          message: /(magic-sdk|@walletconnect\/web3-provider|@web3auth\/web3auth)/,
        }
        
      ]
      return config
    },
  }