react-moralis 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

[x] I am not disclosing a vulnerability.
[x] I have searched through existing issues and the Moralis Forum.
[x] 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

Jan 29 '22 19:01 PatrickAlphaC

I also had the same warning and you need to manually install these dependencies:

yarn addd magic-sdk
@walletconnect/web3-provider
yarn add moralis

then the error goes away. Maybe its because of these packages are in the devDependency of react-moralis. Hopefully this will be fixed in the future.

Jan 31 '22 10:01 malithmcr

These dependencies are optional dependencies, so if you don't need them, then you don't have to install them.

The warning messages have been filtered out in a recent release.

Feb 09 '22 18:02 ErnoW

I'm using "moralis": "^1.3.1" and "react-moralis": "^1.3.0" but it is still throwing those dependency errors and crashes a nextJS project

Feb 09 '22 23:02 yungobiwan

I see, it seems that the error messages still show up in NextJs. Re-opnening this issue for future references.

I started a new NextJs project as described above and see those messages as well in the terminal.

But the app does not crash for me. These are warning messages (due to the limitations of our current build process in the sdk and the fact that we cannot handle optional dependencies very good), but this will not crash the app.

Ideally we want to not show these warnings, but I'm not sure if it is possible with out current build setup for the SDK. This will be solved in the next major release of the SDK (as we are restructuring the architecture and building to be more flexible and modern)

Currently the best solution is:

Ignore the warning messages (as they should only show up in the terminal)
Install the dependencies (will increase the package size a bit though, and if you want to support magicLink, walletconnect and/or web3Auth, then you need them)

Or if you know a way on how to surpress certain warning messages in NextJs, then please let me know.

Feb 10 '22 00:02 ErnoW

I'm using "moralis": "^1.3.1" and "react-moralis": "^1.3.0" but it is still throwing those dependency errors and crashes a nextJS project

The fact that the app crashes, might be because of another error, please check if you have other errors and if the same thing happens with a clean/new project

Feb 10 '22 00:02 ErnoW

@ErnoW Actually you are right it does not crash the nextJS server. Sorry fo the false alarm :sweat_smile:

Feb 10 '22 00:02 yungobiwan

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
    },
  }