next.js: [ 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"
  ]
}

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 14
Comments: 24 (4 by maintainers)

Commits related to this issue

Fix types https://github.com/vercel/next.js/issues/36019#issuecomment-1093706150 — committed to prisma-cms/nextjs by Fi1osof 2 years ago
Update react types. Related https://github.com/vercel/next.js/issues/36019 — committed to martinsione/ticketek-web3 by martinsione 2 years ago
Fix typescript examples error Fix error: [0] src/App.tsx(9,34): error TS2769: No overload matches this call. [0] Overload 1 of 2, '(props: (RouteProps<string, { [x: string]: string; }> & OmitNative... — committed to cskeogh/razzle-fixes by cskeogh 2 years ago

Most upvoted comments

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.

+26

adrianescat on Apr 19, 2022

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?

+13

leo-petrucci on Apr 23, 2022

“resolutions”: { “@types/react”: “<18.0.0”, “@types/react-dom”: “<18.0.0” },

Thank you @adrianescat. Anyone who needs to use npm, you can use overrides instead of resolutions.

"overrides": {
  "@types/react": "<18.0.0",
  "@types/react-dom": "<18.0.0"
}

Read more here, if you want to learn more.

Yonet on May 24, 2022

All of the reported issues here are coming from upstream/third-party libraries, and are not related to Next.js. These should be reported on the respective repositories.

Some useful links:

Suggestions from Twitter by Dan Abramov
https://github.com/facebook/react/issues/24304#issuecomment-1094565891
DefinitelyTyped react issues/PRs since React 18 types have been merged (follow this your lib might add a fix if it’s on DefinitelyTyped)

I’m closing this for now. If you still think there is a problem with Next.js itself, please provide a reproduction in a new issue so we can look more into it.

balazsorban44 on Apr 12, 2022

Same issue here…I tried both updating and downgrading dependencies but it never works in vercel.

AdrianGlez18 on Apr 8, 2022

The same issue are opened: #35986

People, the same error occurs with my apps. I solve this by adding in next.config.js:

typescript: {
    ignoreBuildErrors: true
}

it’s a temporary solution.

oliveiracaue on Apr 9, 2022

Indeed, my fault: I had the wrong version of @types/react. Thanks

ramiel on Apr 14, 2022

We’re experiencing this issue as well starting today. We saw that some packages were updated, and these too:

@types/react-dom updated to version 18.00
@types/react updated to version 18.00

I forced resolutions on both packages to the last version that we used 17.0.11 and everything works as it should.

For us the update to version 18.00, released yesterday btw, is coming from this

"@testing-library/react-hooks@7.0.2":
  version "7.0.2"
  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz#3388d07f562d91e7f2431a4a21b5186062ecfee0"
  integrity sha512-dYxpz8u9m4q1TuzfcUApqi8iFfR6R0FaMbr2hjZJy1uC8z+bO/K4v8Gs9eogGKYQop7QsrBTFkv/BCF7MzD2Cg==
  dependencies:
    "@babel/runtime" "^7.12.5"
    "@types/react" ">=16.9.0"
    "@types/react-dom" ">=16.9.0"
    "@types/react-test-renderer" ">=16.9.0"
    react-error-boundary "^3.1.0"

thiniulian on Apr 8, 2022

IDK if this helps anyone but I was running into a similar issue. I updated "@types/react": "18.0.14" in package.json

ch4nd4n on Jun 30, 2022

Looking at AppProps the type seems correct? Can you expand on what you’d like to change to AppProps? It does not take children in any case as Next.js does not pass children to it, it only passes Component and props from getInitialProps.

export type AppProps = Pick<CompletePrivateRouteInfo, 'Component' | 'err'> & {
  router: Router
} & Record<string, any>

timneutkens on Apr 20, 2022

Our team had the same issue appear yesterday. It was quite the headache. We eventually fixed it by pinning our dependencies.

PerishableDave on Apr 9, 2022