Typescript Build Error when using react-transition-group: No overload matches this call

[bhr]

Reproduction

I'm trying to build a nextjs project that is using react + preact along with react-transition-group.

Running in dev mode works. Building the project fails though given the following error:

Build Error

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<SwitchTransitionProps>): SwitchTransition', gave the following error.
    Type 'Element' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | ... 6 more ... | (ReactElement<...> & ReactPortal)'.
      Type 'Element' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> & ReactPortal'.
        Type 'Element' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.
          Types of property 'type' are incompatible.
            Type 'string | ComponentClass<any, {}> | FunctionComponent<any>' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)'.
              Type 'ComponentClass<any, {}>' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)'.
                Type 'ComponentClass<any, {}>' is not assignable to type 'new (props: any) => Component<any, any, any>'.
                  Property 'refs' is missing in type 'Component<any, {}>' but required in type 'Component<any, any, any>'.
  Overload 2 of 2, '(props: SwitchTransitionProps, context?: any): SwitchTransition', gave the following error.
    Type 'Element' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | ... 6 more ... | (ReactElement<...> & ReactPortal)'.
      Type 'Element' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> & ReactPortal'.
        Type 'Element' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.ts(2769)
index.d.ts(514, 9): 'refs' is declared here.
SwitchTransition.d.ts(19, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Readonly<SwitchTransitionProps> & Readonly<{ children?: ReactNode; }>'
SwitchTransition.d.ts(19, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Readonly<SwitchTransitionProps> & Readonly<{ children?: ReactNode; }>'

Code Sample

const [state, setState] = useState(false);
  const text = state ? "Goodbye, world!" : "Hello, world!";
  const mainContentComponents = () => {
       return (<SwitchTransition>
     <CSSTransition
       key={text}
       timeout={400}
       classNames='fade'
     >
       <button onClick={() => setState(state => !state)}>
         {text}
       </button>
     </CSSTransition>
   </SwitchTransition>);

Codesandbox Preact

Codesandbox

Codesandbox React

For comparison, I created a react-only version that doesn't highlight the error: Codesandbox

Project setup

The actual project setup:

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "ES2019"
    ],
    "baseUrl": "../..",
    "paths": {
      "@vestico/*": [
        "packages/*/src"
      ]
    "allowJs": false,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "jsxFactory": "h",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "noImplicitReturns": true,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true,
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "types": ["typePatches"]
}

package.json

"dependencies": {
    "@google-cloud/secret-manager": "^3.2.3",
    "@vestico/shared": "*",
    "clsx": "^1.1.1",
    "firebase": "^8.0.2",
    "firebase-admin": "^9.4.0",
    "imagemin-optipng": "^8.0.0",
    "next": "^10.0.3",
    "next-compose-plugins": "^2.2.1",
    "next-optimized-images": "^2.6.2",
    "next-plugin-preact": "^3.0.3",
    "preact": "10.5.7",
    "preact-render-to-string": "^5.1.12",
    "preact-ssr-prepass": "^1.1.2",
    "react": "npm:@preact/compat@0.0.3",
    "react-dom": "npm:@preact/compat@0.0.3",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "responsive-loader": "2.0.0",
    "sass": "^1.30.0",
    "sharp": "^0.26.2"
  },
  "devDependencies": {
    "@types/node": "^14.14.12",
    "@types/react": "^16.9.55",
    "@types/react-dom": "^16.9.9",
    "@types/react-router": "^5.1.8",
    "@types/react-router-dom": "^5.1.6",
    "@types/react-transition-group": "^4.4.0",
    "next-transpile-modules": "~4.0.0",
    "typescript": "^4.0.5",
    "webpack": "^4.0.0"
  },

Steps to reproduce

yarn run build

Expected Behavior

Build to succeed

Actual Behavior

Build fails with error above

[on3dd]

I think that the documentation should contain at least minimal examples of using this library with TypeScript, since I couldn't even run an example from the documentation 😕

[marvinhagemeister]

This issue is a duplicate of #2748 . As of today TS doesn't support aliasing of types or messing with their resolution.

@on3dd We have a dedicated page for TypeScript in our documentation. Just checked and those examples listed there work and compile via the official tsc compiler.

[seddy]

@bhr - I don't suppose you worked out to get around this error have you? I've just hit the same thing when trying to use a SwitchTransition and can't resolve it. Our tsconfig is configured as per the tsconfig referenced by @marvinhagemeister, and the workaround suggested in issue #2748 just introduces new errors for me.

[bhr]

@seddy We just ignore the ts-error.

        <SwitchTransition mode="out-in">
          {/* @ts-expect-error: Let's ignore a single compiler error like this unreachable code */}
          <CSSTransition
            key={currentPath}
            timeout={400}
            classNames={pageDirection}
            nodeRef={nodeRef}
            addEndListener={() => {
              nodeRef.current?.addEventListener('transitionend', resetAnimating(), false);
            }}
          >
                ....
          </CSSTransition>
        </SwitchTransition>

[seddy]

Thanks @bhr! That has worked for us too; seems reasonable given the outstanding issue in #2748