Who can help on this issue of MoralisProvider? typescript

Moralis General
#1

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

For the MoralisProvider type, how to fix this issue?

image
image933×534 84.5 KB

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

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <MoralisProvider
        appId={process.env.NEXT_PUBLIC_APPID}
        serverUrl={process.env.NEXT_PUBLIC_SERVER_URL}
      >
        <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;

my 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",
    "framer-motion": "^6",
    "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"
  }
}

(alias) const MoralisProvider: ({ children, appId: _appId, serverUrl: _serverUrl, jsKey, dangerouslyUseOfMasterKey, plugins, environment, getMoralis, options: { onAccountChanged }, initializeOnMount, }: MoralisProviderProps) => JSX.Element
import MoralisProvider
Type ‘{ children: Element; appId: string | undefined; serverUrl: string | undefined; }’ is not assignable to type ‘IntrinsicAttributes & MoralisProviderProps’.
Type ‘{ children: Element; appId: string | undefined; serverUrl: string | undefined; }’ is not assignable to type ‘MoralisProviderInitializedProps’.
Types of property ‘appId’ are incompatible.
Type ‘string | undefined’ is not assignable to type ‘string’.
Type ‘undefined’ is not assignable to type ‘string’.ts(2322)

#2

This works for me

<MoralisProvider appId={process.env.NEXT_PUBLIC_MORALIS_ID || 'xxxxxxxxxxxxxxxxxxx'} serverUrl={process.env.NEXT_PUBLIC_MORALIS_URL || 'https://DEV_SERVER.com:2053/server'}>
2 Likes
#3

Already solved on discord but I’ll answer here too in case someone else need it. you have to add ! to tell typescript that the value will not be null

<MoralisProvider
   appId={process.env.REACT_APP_APPLICATION_ID!}
   serverUrl={process.env.REACT_APP_SERVER_URL!}
>
   <App />
</MoralisProvider>
2 Likes
#4

you can read about it here

1 Like
#5

Yes, solved.
Many thanks.

1 Like
#6

Thanks a lot. The root cause is when the variable is null or undefined , my solution is

      <MoralisProvider
        appId={apId ?? "AppId Undefined Fallback"}
        serverUrl={sUrl ?? "ServerUrl Undefined Fallback"}
      >
1 Like