Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.ts

[PatrickAlphaC]

import type { AppProps } from 'next/app'
import { MoralisProvider } from "react-moralis"
import { NotificationProvider } from "web3uikit"
import "../styles/globals.css"

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <MoralisProvider initializeOnMount={false}>
                <NotificationProvider> // Error line
                  <Component {...pageProps} />
                </NotificationProvider>
        </MoralisProvider>
    )
}

export default MyApp

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)

I'm using NotificationProvider in my react / nextjs application, and I keep running into this issue. Not sure how to fix.

Relevant package versions:

  "dependencies": {
    "autoprefixer": "^10.4.4",
    "ethers": "^5.6.2",
    "moralis": "^1.5.9",
    "next": "12.1.5",
    "postcss": "^8.4.12",
    "prettier": "^2.6.2",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-moralis": "^1.3.5",
    "tailwindcss": "^3.0.24",
    "web3uikit": "^0.1.120",
    "@types/node": "17.0.23",
    "@types/react": "18.0.3",
    "@types/react-dom": "18.0.0",
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.5",
    "typescript": "4.6.3"
  }

[locothedev]

Hey @PatrickAlphaC React 18 removed the default children type from Functional Components. See this. We are currently refactoring every component.

You can either downgrade react or modify the web3ui component locally from React.FC to React.VFC

[PatrickAlphaC]

O wow, thanks for the heads up!