What will cause this issue of Can’t resolve ‘@solana/web3.js’?

I have tried both v14.18.0 and v18.0.0, both have this issue.

Language : typescript Version 4.1.3
Framework: next 12.1.5
moralis : 1.5.10
react-moralis : 1.3.5

image

Module not found: Can’t resolve ‘@solana/web3.js’

package.json:

{
  "name": "moralis-dashboard6",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/react": "^1.8.8",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@walletconnect/web3-provider": "^1.7.7",
    "@web3auth/web3auth": "^0.9.3",
    "framer-motion": "^6",
    "magic-sdk": "7.0.0",
    "moralis": "^1.5.10",
    "next": "^12.1.5",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-icons": "^4.3.1",
    "react-moralis": "^1.3.5",
    "suncalc": "^1.9.0"
  },
  "devDependencies": {
    "@types/node": "17.0.25",
    "@types/react": "18.0.5",
    "@types/react-dom": "18.0.1",
    "@types/suncalc": "^1.8.1",
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.5",
    "typescript": "4.6.3"
  }
}

Before run yarn add @solana/web3.js , I want to know, why this happened?

There is no any code, related with solana, in my project.

And I am sure that, it is MoralisProvider which caused this issue.

Removed it, this issue disappeared.

If remove the MoralisProvider, when call useMoralis in other file, will trigger another issue.

Hello, anybody here?

This issue is pulling me deeply. Who can help?

Does installing @solana/web3.js get rid of the error? You may have to just live with it as a direct dependency for now.

Yes you need to keep MoralisProvider otherwise you can’t use any of the hooks.

1 Like

Didn’t.

Stuck there.

{
  "name": "moralis-dashboard6",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/react": "^1.8.8",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@solana/web3.js": "^1.41.0",
    "@walletconnect/web3-provider": "^1.7.7",
    "@web3auth/web3auth": "^0.9.0",
    "framer-motion": "^6",
    "magic-sdk": "7.0.0",
    "moralis": "^1.5.9",
    "next": "latest",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1",
    "react-moralis": "^1.3.5",
    "suncalc": "^1.9.0"
  },
  "devDependencies": {
    "@types/node": "17.0.25",
    "@types/react": "18.0.5",
    "@types/react-dom": "18.0.1",
    "@types/suncalc": "^1.8.1",
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.5",
    "typescript": "4.6.3"
  }
}

Changed react to 17.0.2, looks better, debugging.

import type { AppProps } from "next/app";
import ColorModeSwitcher from "../components/ColorModeSwitcher";
import { ChakraProvider, Box, Grid, VStack, theme } from "@chakra-ui/react";
import { MoralisProvider } from "react-moralis";

// const getSetupEnv = (key: string): string | undefined => {
//   if (!process.env[key]) {
//     throw Error("handle me");
//   }

//   return process.env[key];
// };

function MyApp({ Component, pageProps }: AppProps) {
  // const apId = getSetupEnv("NEXT_PUBLIC_APPID");
  // const sUrl = getSetupEnv("NEXT_PUBLIC_SERVER_URL");
  return (
    <ChakraProvider theme={theme}>
      <MoralisProvider
        appId={process.env.NEXT_PUBLIC_APPID ?? "AppId Undefined Fallback"}
        serverUrl={
          process.env.NEXT_PUBLIC_SERVER_URL ?? "ServerUrl Undefined Fallback"
        }
      >
        <Box textAlign="center" fontSize="xl">
          <Grid minH="100vh" p={3}>
            <ColorModeSwitcher justifySelf="flex-end" />
            <VStack spacing={18}>
              <Component {...pageProps} />
            </VStack>
          </Grid>
        </Box>
      </MoralisProvider>
    </ChakraProvider>
  );
}

export default MyApp;

Now issue changed to :

You have to run Moralis.start, like it says

Moralis.start({appId: APP_ID, serverUrl: SERVER_URL});
1 Like

Searched, there is no site to run Moralis.start.

You are getting “window is not defined”?

No, no error of ‘window is not defined’

What do you mean by this?

Searched source code, seems there is no this kind of code…

Not sure where this Web3Api comes.

Hi @skylon.jose
Check this guide on how to connect with Moralis SDK
https://docs.moralis.io/moralis-dapp/connect-the-sdk/connect-with-react

1 Like

Got it, in this link https://docs.moralis.io/misc/troubleshooting

Thanks a lot for your warm help.

Have read it, looks this doc lack of Moralis.start

Hi read this: https://docs.moralis.io/moralis-dapp/connect-the-sdk/connect-with-js

I am using Next, with typescript.

You mentioned you were looking for documentation on using Moralis.start.