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

ldmsh · 2022-04-08T19:14:12Z

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"
  ]
}

The text was updated successfully, but these errors were encountered:

thiniulian · 2022-04-08T19:35:06Z

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"

AdrianGlez18 · 2022-04-08T23:51:24Z

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

PerishableDave · 2022-04-09T02:09:12Z

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

brennanbutler01 · 2022-04-09T05:26:48Z

same error for me too - i tried to force resolution of @types/react & @types/react-dom to 17.0.11 without success in fixing issue. unable to deploy successfully

ahmadjoya · 2022-04-09T14:12:17Z

I also got this error since 24 hours ago. and could not solve yet

yichunsung · 2022-04-09T16:45:47Z

same issue in next build

react: "17.0.2"

react-dom: "17.0.2"

yasssuz · 2022-04-09T20:39:01Z

same issue here, i couldn't deploy stuff because of this error. Tried both upgrading and downgrading nextjs, react and react-dom, @types/react and @types/react-dom

oliveiracaue · 2022-04-09T20:51:31Z

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.

enyelsequeira · 2022-04-11T04:47:11Z

Seems like this is still an issue, I tried downgrading and using the packages version to the last successfully deployed versions, has there been any solutions other than this above?

typescript: {
ignoreBuildErrors: true
}

thiniulian · 2022-04-11T06:42:02Z

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"

In my case the react-testing/react-hooks was released yesterday with a new major version (8.0.0) that doesn't import types anymore, solving the issue.

I recommend inspecting your yarn.lock / package-lock.json and see which packages install the 18.0.0 versions for @types/react and @types/react-dom and why.

I used yarn resolutions to pin mine to an earlier working version, but it's still a workaround.

balazsorban44 · 2022-04-12T09:09:54Z

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
Bug: React 18 types broken since the type release a view hours ago facebook/react#24304 (comment)
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.

ramiel · 2022-04-13T06:19:10Z

Hello @balazsorban44 , are you sure about this? The issue reports the type error about Component, this being the component exposed in _app.tsx. To be more clear, this code fails to compile

// _app.tsx

import type { AppProps } from "next/app";

export default function MyApp({ Component, pageProps }: AppProps) {

  // the line below produce the typescript error
  return ( <Component {...pageProps} />);
}

and there's no third party code, just nextjs

balazsorban44 · 2022-04-13T13:39:16Z

Yes, I could not reproduce a build error. Although you can try upgrading to next@latest, we did fix an issue with the create-next-app CLI recently, regarding this.

If you still have an issue, could you attach a full reproduction, and maybe a link to the deployment that fails?

ramiel · 2022-04-14T06:00:31Z

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

adrianescat · 2022-04-19T23:45:40Z

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.

timneutkens · 2022-04-20T15:42:54Z

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>

leo-petrucci · 2022-04-23T18:04:26Z

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?

Yonet · 2022-05-24T07:00:15Z

"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.

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<{}, keyof RouteProps<string, { [x: string]: string; }>>) | Readonly<RouteProps<string, { ...; }> & OmitNative<...>>): Route<...>', gave the following error. [0] Type 'typeof Home' is not assignable to type 'ComponentType<RouteComponentProps<any, StaticContext, unknown>> | ComponentType<any>'. [0] Type 'typeof Home' is not assignable to type 'ComponentClass<RouteComponentProps<any, StaticContext, unknown>, any>'. [0] The types of 'contextType.Provider.propTypes.children' are incompatible between these types. [0] Type 'React.Validator<React.ReactNode>' is not assignable to type 'import("C:/Users/craig/Projects/razzle-line-numbers/node_modules/@types/react-router/node_modules/@types/react/index").Validator<import("C:/Users/craig/Projects/razzle-line-numbers/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode>'. [0] Type 'React.ReactNode' is not assignable to type 'import("C:/Users/craig/Projects/razzle-line-numbers/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'. [0] Type '{}' is not assignable to type 'ReactNode'. [0] Overload 2 of 2, '(props: RouteProps<string, { [x: string]: string; }> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string; }>>, context: any): Route<...>', gave the following error. [0] Type 'typeof Home' is not assignable to type 'ComponentType<RouteComponentProps<any, StaticContext, unknown>> | ComponentType<any>'. Inspired by: vercel/next.js#35986 vercel/next.js#36019 Fixes jaredpalmer#1867

wisdomose · 2022-06-08T12:15:43Z

update @types/react to the latest version

moatorres · 2022-06-28T03:07:46Z

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

Did you manage to fix it @creativiii? That's exactly what's happening in one of my projects.

adambaialiev · 2022-06-28T12:58:47Z

Solved this by type casting

const C = Component as FunctionComponent;
return (
  <C {...pageProps} />
)

ch4nd4n · 2022-06-30T18:21:55Z

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

github-actions · 2022-07-31T00:21:53Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

ldmsh added the bug Issue was opened via the bug report template. label Apr 8, 2022

balazsorban44 added the TypeScript Related to types with Next.js. label Apr 9, 2022

Fi1osof added a commit to prisma-cms/nextjs that referenced this issue Apr 10, 2022

Fix types vercel/next.js#36019 (comment)

9358fe7

This was referenced Apr 10, 2022

🐛 [프로젝트 세팅] 세팅 오류 해결 depromeet/antoon-web#24

Merged

[Bug] _app.tsx 빌드 실패 depromeet/antoon-web#23

Closed

LumaKernel mentioned this issue Apr 11, 2022

fix: pin react types versions frouriojs/create-frourio-app#353

Merged

4 tasks

balazsorban44 added the type: needs investigation label Apr 11, 2022

vithushan19 mentioned this issue Apr 11, 2022

Ignore build errors on production using next.config.js skillify-ca/skillify-web#684

Merged

balazsorban44 added the React 18 label Apr 12, 2022

balazsorban44 closed this as completed Apr 12, 2022

balazsorban44 added the Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.). label Apr 12, 2022

calliope-pro mentioned this issue Apr 13, 2022

Type Errorによるbuild/deploy失敗 calliope-pro/next-blog-frontend#20

Closed

martinsione added a commit to martinsione/ticketek-web3 that referenced this issue Apr 13, 2022

Update react types. Related vercel/next.js#36019

3ba9f36

andrevitalb mentioned this issue Apr 14, 2022

chore: Updated dependencies versions to latest andrevitalb/subprocessor-listing#3

Merged

timneutkens mentioned this issue Apr 20, 2022

Type '{}' is not assignable to type 'ReactNode'. #35986

Closed

1 task

This comment was marked as off-topic.

Sign in to view

Yonet mentioned this issue May 24, 2022

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

Closed

cskeogh mentioned this issue May 26, 2022

Fix typescript examples error jaredpalmer/razzle#1868

Open

inezamandha mentioned this issue May 30, 2022

fix: change dynamic import sirclo-solution/template-rose#9

Merged

NOUIY mentioned this issue Jul 4, 2022

[Snyk] Upgrade antd from 4.3.0 to 4.21.1 NOUIY/next.js#419

Open

This was referenced Jul 5, 2022

[Snyk] Upgrade antd from 4.3.0 to 4.21.2 NOUIY/next.js#420

Open

[Snyk] Upgrade antd from 4.3.0 to 4.21.3 NOUIY/next.js#433

Open

github-actions bot locked as resolved and limited conversation to collaborators Jul 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ldmsh commented Apr 8, 2022 •

edited

thiniulian commented Apr 8, 2022

AdrianGlez18 commented Apr 8, 2022

PerishableDave commented Apr 9, 2022

brennanbutler01 commented Apr 9, 2022

ahmadjoya commented Apr 9, 2022

yichunsung commented Apr 9, 2022 •

edited

yasssuz commented Apr 9, 2022 •

edited

oliveiracaue commented Apr 9, 2022

enyelsequeira commented Apr 11, 2022

thiniulian commented Apr 11, 2022

balazsorban44 commented Apr 12, 2022

ramiel commented Apr 13, 2022 •

edited

balazsorban44 commented Apr 13, 2022

ramiel commented Apr 14, 2022

adrianescat commented Apr 19, 2022 •

edited

timneutkens commented Apr 20, 2022

leo-petrucci commented Apr 23, 2022

This comment was marked as off-topic.

Yonet commented May 24, 2022

wisdomose commented Jun 8, 2022

moatorres commented Jun 28, 2022 •

edited

adambaialiev commented Jun 28, 2022

ch4nd4n commented Jun 30, 2022 •

edited

github-actions bot commented Jul 31, 2022

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

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

Comments

ldmsh commented Apr 8, 2022 • edited

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

To Reproduce

thiniulian commented Apr 8, 2022

AdrianGlez18 commented Apr 8, 2022

PerishableDave commented Apr 9, 2022

brennanbutler01 commented Apr 9, 2022

ahmadjoya commented Apr 9, 2022

yichunsung commented Apr 9, 2022 • edited

yasssuz commented Apr 9, 2022 • edited

oliveiracaue commented Apr 9, 2022

enyelsequeira commented Apr 11, 2022

thiniulian commented Apr 11, 2022

balazsorban44 commented Apr 12, 2022

ramiel commented Apr 13, 2022 • edited

balazsorban44 commented Apr 13, 2022

ramiel commented Apr 14, 2022

adrianescat commented Apr 19, 2022 • edited

timneutkens commented Apr 20, 2022

leo-petrucci commented Apr 23, 2022

This comment was marked as off-topic.

Yonet commented May 24, 2022

wisdomose commented Jun 8, 2022

moatorres commented Jun 28, 2022 • edited

adambaialiev commented Jun 28, 2022

ch4nd4n commented Jun 30, 2022 • edited

github-actions bot commented Jul 31, 2022

ldmsh commented Apr 8, 2022 •

edited

yichunsung commented Apr 9, 2022 •

edited

yasssuz commented Apr 9, 2022 •

edited

ramiel commented Apr 13, 2022 •

edited

adrianescat commented Apr 19, 2022 •

edited

moatorres commented Jun 28, 2022 •

edited

ch4nd4n commented Jun 30, 2022 •

edited