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

[ldmsh]

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

[thiniulian]

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/[email protected]":
  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]

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

[PerishableDave]

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

[brennanbutler01]

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]

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

[yichunsung]

same issue in next build

react: "17.0.2"

react-dom: "17.0.2"

[yasssuz]

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]

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]

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]

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/[email protected]":
  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]

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]

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]

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]

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

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

[timneutkens]

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]

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]

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

[wisdomose]

update @types/react to the latest version

[moatorres]

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

Solved this by type casting

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

[ch4nd4n]

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]

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.