The specified type cannot be assigned to the type 'IntrinsicAttributes & MoralisProviderProps'

Question

The specified type cannot be assigned to the type 'IntrinsicAttributes & MoralisProviderProps'

I'm brand new to TypeScript and I have a question about setting initializeOnMount to true. Why does it only allow me to set it to false? Here is the error message:

Type '{ children: Element; appId: string | undefined; serverUrl: string | undefined; initializeOnMount: true; }' is not assignable to type 'IntrinsicAttributes & MoralisProviderProps'.
  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)

The type signature for MoralisProvider is as follows:

const MoralisProvider: ({ children, appId: _appId, serverUrl: _serverUrl, jsKey, dangerouslyUseOfMasterKey, plugins, environment, getMoralis, options: { onAccountChanged }, 
initializeOnMount, }: MoralisProviderProps) => JSX.Element

The code snippet for mounting the component:

import MoralisProvider
import type { AppProps } from 'next/app';
import { MoralisProvider } from 'react-moralis';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MoralisProvider
      appId={process.env.NEXT_PUBLIC_MORALIS_APP_ID}
      serverUrl={process.env.NEXT_PUBLIC_MORALIS_SERVER_ID}
      initializeOnMount
    >
        <Component {...pageProps} />
    </MoralisProvider>)
}

export default MyApp;

typescript next.js web3js moralis

Answer 1

Answer №1

Upon realizing that it was only anticipating a string, I resolved the TypeScript warning by utilizing template literals:

      appId={`${process.env.NEXT_PUBLIC_MORALIS_APP_ID}`}
      serverUrl={`${process.env.NEXT_PUBLIC_MORALIS_SERVER_URL}`}

Answer 2

Upon realizing that it was only anticipating a string, I resolved the TypeScript warning by utilizing template literals:

      appId={`${process.env.NEXT_PUBLIC_MORALIS_APP_ID}`}
      serverUrl={`${process.env.NEXT_PUBLIC_MORALIS_SERVER_URL}`}

Answer 3

Answer №2

The issue highlighted by Typescript is not related to initializeOnMount, but rather with the appId. When using process.env, you will receive an object that may or may not have the required values. It is recommended to extract these values before mounting and verify their existence. One simple approach is:

const getEnvValue = (key: string): string => {
  if (!process.env[key]) {
    throw Error("Please handle this scenario")
  }

  return process.env[key]
}

The challenge lies in deciding how to handle the error if it occurs, which will vary based on the specifics of your project.

Answer 4

The issue highlighted by Typescript is not related to initializeOnMount, but rather with the appId. When using process.env, you will receive an object that may or may not have the required values. It is recommended to extract these values before mounting and verify their existence. One simple approach is:

const getEnvValue = (key: string): string => {
  if (!process.env[key]) {
    throw Error("Please handle this scenario")
  }

  return process.env[key]
}

The challenge lies in deciding how to handle the error if it occurs, which will vary based on the specifics of your project.

Answer 5

Answer №3

all process.env values are string | undefined

implementing nullish coalescing to address the issue

import MoralisProvider
import type { AppProps } from 'next/app';
import { MoralisProvider } from 'react-moralis';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MoralisProvider
      appId={process.env.NEXT_PUBLIC_MORALIS_APP_ID ?? "AppId Undefined Fallback"}
      serverUrl={process.env.NEXT_PUBLIC_MORALIS_SERVER_ID ?? "ServerUrl Undefined Fallback"}
      initializeOnMount
    >
        <Component {...pageProps} />
    </MoralisProvider>)
}

export default MyApp;

tip

inject app with MoralisProviderProps. Create a types/next.d.ts file and define it as follows:

import type { NextComponentType, NextPageContext } from "next";
import type { AppInitialProps } from "next/app";
import type { Router } from "next/router";
import type { MoralisProviderProps } from 'react-moralis';

declare module "next/app" {
  type AppProps<P = Record<string, unknown>> = {
    Component: NextComponentType<NextPageContext, any, P>;
    router: Router;
    __N_SSG?: boolean | undefined;
    __N_SSP?: boolean | undefined;
    __N_RSC?: boolean | undefined;
    pageProps: P & {
       moralisProps: MoralisProviderProps;
    };
  };
}

if you only want to pass in appId and serverUrl as props, then define a custom type for _app

import type { NextComponentType, NextPageContext } from "next";
import type { AppInitialProps } from "next/app";
import type { Router } from "next/router";
import { MoralisProvider } from 'react-moralis';

export declare const customAppProps: {
  appId: string | undefined;
  serverUrl: string | undefined;
} = {
  appId: process.env.NEXT_PUBLIC_MORALIS_APP_ID,
  serverUrl: process.env.NEXT_PUBLIC_MORALIS_SERVER_ID
};

declare module "next/app" {
  type AppProps<P = Record<string, unknown>> = {
    Component: NextComponentType<NextPageContext, any, P>;
    router: Router;
    __N_SSG?: boolean | undefined;
    __N_SSP?: boolean | undefined;
    __N_RSC?: boolean | undefined;
    pageProps: P & {
      customProps: typeof customAppProps;
    };
  };
}

Then modify _app like this

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MoralisProvider
      appId={pageProps.customProps.appId}
      serverUrl={pageProps.customProps.serverUrl}
      initializeOnMount
    >
        <Component {...pageProps} />
    </MoralisProvider>)
}

export default MyApp;

Important -- this technique is particularly handy for global context providers such as apollo client's normalized cache object or authentication tokens like jwt for session management

Answer 6

all process.env values are string | undefined

implementing nullish coalescing to address the issue

import MoralisProvider
import type { AppProps } from 'next/app';
import { MoralisProvider } from 'react-moralis';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MoralisProvider
      appId={process.env.NEXT_PUBLIC_MORALIS_APP_ID ?? "AppId Undefined Fallback"}
      serverUrl={process.env.NEXT_PUBLIC_MORALIS_SERVER_ID ?? "ServerUrl Undefined Fallback"}
      initializeOnMount
    >
        <Component {...pageProps} />
    </MoralisProvider>)
}

export default MyApp;

tip

inject app with MoralisProviderProps. Create a types/next.d.ts file and define it as follows:

import type { NextComponentType, NextPageContext } from "next";
import type { AppInitialProps } from "next/app";
import type { Router } from "next/router";
import type { MoralisProviderProps } from 'react-moralis';

declare module "next/app" {
  type AppProps<P = Record<string, unknown>> = {
    Component: NextComponentType<NextPageContext, any, P>;
    router: Router;
    __N_SSG?: boolean | undefined;
    __N_SSP?: boolean | undefined;
    __N_RSC?: boolean | undefined;
    pageProps: P & {
       moralisProps: MoralisProviderProps;
    };
  };
}

if you only want to pass in appId and serverUrl as props, then define a custom type for _app

import type { NextComponentType, NextPageContext } from "next";
import type { AppInitialProps } from "next/app";
import type { Router } from "next/router";
import { MoralisProvider } from 'react-moralis';

export declare const customAppProps: {
  appId: string | undefined;
  serverUrl: string | undefined;
} = {
  appId: process.env.NEXT_PUBLIC_MORALIS_APP_ID,
  serverUrl: process.env.NEXT_PUBLIC_MORALIS_SERVER_ID
};

declare module "next/app" {
  type AppProps<P = Record<string, unknown>> = {
    Component: NextComponentType<NextPageContext, any, P>;
    router: Router;
    __N_SSG?: boolean | undefined;
    __N_SSP?: boolean | undefined;
    __N_RSC?: boolean | undefined;
    pageProps: P & {
      customProps: typeof customAppProps;
    };
  };
}

Then modify _app like this

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MoralisProvider
      appId={pageProps.customProps.appId}
      serverUrl={pageProps.customProps.serverUrl}
      initializeOnMount
    >
        <Component {...pageProps} />
    </MoralisProvider>)
}

export default MyApp;

Important -- this technique is particularly handy for global context providers such as apollo client's normalized cache object or authentication tokens like jwt for session management

The specified type cannot be assigned to the type 'IntrinsicAttributes & MoralisProviderProps'

Answer №1

Answer №2

Answer №3

tip

Similar questions

What could be the reason for the defaultCommandTimeout not functioning as expected in my script

Limitations of MaterialUI Slider

I'm looking to conceal the error overlay on Nextjs

An unexpected TypeScript error was encountered in the directory/node_modules/@antv/g6-core/lib/types/index.d.ts file at line 24, column 37. The expected type was

After upgrading to version 4.0.0 of typescript-eslint/parser, why is eslint having trouble recognizing JSX or certain react @types as undefined?"

Is there a resource or extension available for identifying design flaws in Typescript code?

Inject components in Angular using dependency injection

Gain access to TypeScript headers by typing the request (req) object

Having trouble downloading Next.Js as I continuously encounter the error message "Module Not Found."

Angular 5 - Creating a dynamic function that generates a different dynamic function

Ways to compel string type or disregard type?

Enhance tns-platform-declarations with NativeScript

Tips for displaying backend error messages on the frontend

RxJS: the art of triggering and handling errors

Is it feasible to use a component in a recursively manner?

Create an interface that adheres to the defined mapped type

Transferring data between browser tabs in Next.js and automatically populating a formik form

Guide on how to display the next/image on a public IP domain

I am experiencing an issue with my service provider when it comes to displaying multiple navigator stacks

ts:Accessing the state within a Redux store