TypeScript Type Error with Overridden Components in FileUploader Using AWS Amplify UI

[yadokarization]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Storage

How is your app built?

Next.js

What browsers are you seeing the problem on?

No response

Which region are you seeing the problem in?

No response

Please describe your bug.

When deploying an application built with Next.js 15 and AWS Amplify UI components, I encounter a TypeScript type error. This issue occurs when using the FileUploader from @aws-amplify/ui-react-storage, where Container and DropZone have been overridden.

The primary error message is as follows:

Type error: No overload matches this call.
Overload 1 of 2, '(props: MergeProps<PrimitivePropsWithRef<PrimitivePropsWithAs<BaseFlexProps, "div">, "div">, Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>): ReactElement<...> | null', gave the following error.
Type 'React.ReactNode' is not assignable to type 'import("/codebuild/output/src3982491833/src/my-app/node_modules/@aws-amplify/ui-react/node_modules/@types/react/index").ReactNode'.
Type 'bigint' is not assignable to type 'ReactNode'.
Overload 2 of 2, '(props: MergeProps<PrimitivePropsWithRef<PrimitivePropsWithAs<BaseFlexProps, "div">, "div">, Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>): ReactElement<...> | null', gave the following error.
Type 'React.ReactNode' is not assignable to type 'import("/codebuild/output/src3982491833/src/my-app/node_modules/@aws-amplify/ui-react/node_modules/@types/react/index").ReactNode'.
Type 'bigint' is not assignable to type 'ReactNode'.

Detailed steps for reproducing the error will be described later. If the issue is due to my implementation, I apologize for any inconvenience.

What's the expected behaviour?

No type errors.

Help us reproduce the bug!

Create a Next.js 15 application using the following command and answer all prompts with the default values (simply press Enter).

npx create-next-app@latest 

Install the necessary packages:

npm install @aws-amplify/ui-react @aws-amplify/ui-react-storage

Here are the package versions I used when I encountered the issue:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^6.8.0",
    "@aws-amplify/ui-react-storage": "^3.6.0",
    "next": "15.1.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Rewrite app/page.tsx as follows, based on the examples provided in the Amplify UI documentation:

import * as React from "react";
import {
  Card,
  Button,
  Flex,
  Text,
  Divider,
  Image,
  Loader,
  Icon,
} from "@aws-amplify/ui-react";
import { FileUploader } from "@aws-amplify/ui-react-storage";

export default function Home() {
  return (
    <FileUploader
      acceptedFileTypes={["image/*"]}
      path="public/"
      maxFileCount={100}
      components={{
        Container({ children }) {
          return <Card variation="elevated">{children}</Card>;
        },
        DropZone({ children, displayText, inDropZone, ...rest }) {
          return (
            <Flex
              alignItems="center"
              direction="column"
              padding="medium"
              backgroundColor={inDropZone ? "primary.10" : ""}
              {...rest}
            >
              <Text>Drop files here</Text>
              <Divider size="small" label="or" maxWidth="10rem" />
              {children}
            </Flex>
          );
        },
        FilePicker({ onClick }) {
          return (
            <Button variation="primary" onClick={onClick}>
              Browse Files
            </Button>
          );
        },
        FileList({ files, onCancelUpload, onDeleteUpload }) {
          return (
            <Flex direction="row">
              {files.map(({ file, key, progress, id, status, uploadTask }) => (
                <Flex
                  key={key}
                  justifyContent="center"
                  alignItems="center"
                  width="5rem"
                  height="5rem"
                  position="relative"
                >
                  <Image
                    borderRadius="small"
                    height="100%"
                    objectFit="cover"
                    src={URL.createObjectURL(file)}
                    alt={key}
                  />
                  {progress < 100 ? (
                    <Loader
                      position="absolute"
                      size="large"
                      percentage={progress}
                      isDeterminate
                      isPercentageTextHidden
                    />
                  ) : null}

                  <Button
                    opacity="50"
                    borderRadius="xxl"
                    backgroundColor="background.primary"
                    position="absolute"
                    variation="link"
                    size="small"
                    onClick={() => {
                      if (status === "uploading") {
                        onCancelUpload({ id, uploadTask });
                      } else {
                        onDeleteUpload({ id });
                      }
                    }}
                  >
                    <Icon
                      fontSize="large"
                      color="font.error"
                      viewBox={{ width: 512, height: 512 }}
                      paths={[
                        {
                          d: "M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z",
                          strokeWidth: "32",
                          fill: "none",
                          strokeMiterlimit: "10",
                          stroke: "currentColor",
                        },
                        {
                          d: "M320 320L192 192m0 128l128-128",
                          strokeWidth: "32",
                          fill: "none",
                          strokeLinecap: "round",
                          stroke: "currentColor",
                        },
                      ]}
                    />
                  </Button>
                </Flex>
              ))}
            </Flex>
          );
        },
      }}
    />
  );
}

Deploying to Amplify, then the following error occurs. The same error can also be seen in development environments such as VSCode:

Type error: No overload matches this call.
Overload 1 of 2, '(props: MergeProps<PrimitivePropsWithRef<PrimitivePropsWithAs<BaseFlexProps, "div">, "div">, Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>): ReactElement<...> | null', gave the following error.
Type 'React.ReactNode' is not assignable to type 'import("/codebuild/output/src3982491833/src/my-app/node_modules/@aws-amplify/ui-react/node_modules/@types/react/index").ReactNode'.
Type 'bigint' is not assignable to type 'ReactNode'.
Overload 2 of 2, '(props: MergeProps<PrimitivePropsWithRef<PrimitivePropsWithAs<BaseFlexProps, "div">, "div">, Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>): ReactElement<...> | null', gave the following error.
Type 'React.ReactNode' is not assignable to type 'import("/codebuild/output/src3982491833/src/my-app/node_modules/@aws-amplify/ui-react/node_modules/@types/react/index").ReactNode'.
Type 'bigint' is not assignable to type 'ReactNode'.

Code Snippet

No response

Console log output

No response

Additional information and screenshots

During the process of addressing a bug in our project, I noticed an inconsistency with the @types/react versions that might be contributing to the issue. Below is the output from running npm ls @types/react:

[email protected] /path/my-app
├─┬ @aws-amplify/[email protected]
│ └─┬ @radix-ui/[email protected]
│   └─┬ @radix-ui/[email protected]
│     └─┬ [email protected]
│       ├── @types/[email protected]
│       ├─┬ [email protected]
│       │ └── @types/[email protected] deduped
│       ├─┬ [email protected]
│       │ └── @types/[email protected] deduped
│       ├─┬ [email protected]
│       │ └── @types/[email protected] deduped
│       └─┬ [email protected]
│         └── @types/[email protected] deduped
├─┬ @types/[email protected]
│ └── @types/[email protected] deduped
└── @types/[email protected]

As I am not very familiar with this issue, I cannot definitively say whether this inconsistency is the cause.

[jordanvn]

Hello @yadokarization 👋 Thank you for opening this issue. This is appears to be an issue of compatibility between React 19 and the older version of Radix UI currently used by Amplify UI.

We are aware of this issue and are currently working on a fix. For the time being, a workaround to mitigate this issue would be to use React 18.

[jordanvn]

This was confirmed to be a compatibility issue between React 19 and the older version of Radix UI currently being used within Amplify UI. For the time being, we have rolled back our support of React 19 while we resolve this issue.