[ vercel ] deployment failure - Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null' in _app.tsx

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

next: 12.1.0 react: 17.0.2 react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

unable to reproduce locally as next build succeeds, it only seems to occur when triggering a deployment on vercel, no matter what I try.

info  - Checking validity of types...
Failed to compile.
./pages/_app.tsx:52:16
Type error: 'Component' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
    Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/vercel/path0/apps/next/node_modules/@types/react-map-gl/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.
  50 |           <ManagedUIContext>
  51 |             <>
> 52 |               <Component
     |                ^
  53 |                 {...pageProps}
  54 |                 key={router.route}
  55 |               />
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn build" exited with 1

sorry if I’m missing something obvious, if anyone has experienced the same would really appreciate a tip on how to resolve. thanks

Expected Behavior

vercel deployment should succeed as normal, seeing as no real updates have been made to the codebase since last deployment.

To Reproduce

triggering a fresh deployment from vercel for an existing nextjs project. I can create a reproduction repo if needed.

my tsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "alwaysStrict": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "paths": {
      "@blocks/*": [
        "blocks/*"
      ],
      "@components/*": [
        "components/*"
      ],
      "@constants/*": [
        "constants/*"
      ],
      "@containers/*": [
        "containers/*"
      ],
      "@contexts/*": [
        "contexts/*"
      ],
      "@framework/*": [
        "framework/*"
      ],
      "@globals/*": [
        "globals/*"
      ],
      "@payload/*": [
        "payload/*"
      ],
      "@queries/*": [
        "queries/*"
      ],
      "@store/*": [
        "store/*"
      ],
      "@styles/*": [
        "styles/*"
      ],
      "@types/*": [
        "types/*"
      ],
      "@utils/*": [
        "utils/*"
      ],
      "@lib/*": [
        "lib/*"
      ]
    },
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

[adrianescat]

LOL, It seems nobody wants to take charge of this issue.

Dan Abramov breaks things and says: “think if TypeScript is necessary for your project”. And then Vercel, Next.js’s AppProps type, could resolve the issue for us very clean and transparent.

Anyway, I solved this issue using yarn, @types/react and @types/react-dom specific versions, and the resolutions block in my package.json:

....
"devDependencies": {
    "@types/react": "17.0.39",
    "@types/react-dom": "17.0.15",
},
.....
"resolutions": {
    "@types/react": "<18.0.0",
    "@types/react-dom": "<18.0.0"
  },

Specifying @types/react and @types/react-dom versions didn’t solve the issue for me because a REAL app in production has a lot of dependencies, and a lot of them may have:

dependencies:
    "@types/react" "*"

That ends in downloading 18.0.0 versions again… which is why I needed the resolutions block. This temporary solution will work for you if you don’t want to update to React 18 yet.

[creativiii]

I think I happened upon this in a way that might be related to Next.js. For me it happens when dynamically importing components:

import dynamic from 'next/dynamic';

const Component = dynamic(
  () => import('../../components/component'),
  {
    ssr: false,
  }
);

function Page() {
  // This errors out
  return <Component />;
}

Packages:

    "next": "^12.0.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "@types/react": "^17.0.6",

This happens when importing any component. Would a reproduction be useful to you guys?