Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
ldmsh opened this issue Apr 8, 2022 · 24 comments
Labels
bug Issue was opened via the bug report template. TypeScript Related to types with Next.js. Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).

Comments

@ldmsh
Copy link

ldmsh commented Apr 8, 2022

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"
  ]
}
@ldmsh ldmsh added the bug Issue was opened via the bug report template. label Apr 8, 2022
@thiniulian
Copy link

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
Copy link

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

@PerishableDave
Copy link

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

@brennanbutler01
Copy link

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

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

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

@yichunsung
Copy link

yichunsung commented Apr 9, 2022

same issue in next build

react: "17.0.2"

react-dom: "17.0.2"

@yasssuz
Copy link

yasssuz commented Apr 9, 2022

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
Copy link

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
Copy link

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
Copy link

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
Copy link
Member

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:

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 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
@ramiel
Copy link

ramiel commented Apr 13, 2022

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
Copy link
Member

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?

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

ramiel commented Apr 14, 2022

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

@adrianescat
Copy link

adrianescat commented Apr 19, 2022

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
Copy link
Member

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
Copy link

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?

@yasssuz

This comment was marked as off-topic.

@Yonet
Copy link

Yonet commented May 24, 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.

cskeogh added a commit to cskeogh/razzle-fixes that referenced this issue May 26, 2022
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
Copy link

update @types/react to the latest version

@moatorres
Copy link

moatorres commented Jun 28, 2022

"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
Copy link

Solved this by type casting

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

@ch4nd4n
Copy link

ch4nd4n commented Jun 30, 2022

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
Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. TypeScript Related to types with Next.js. Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).
Projects
None yet
Development

No branches or pull requests