Skip to content

Error installing FlashList #1661

New issue
New issue
Open
Open
Error installing FlashList#1661
Labels
bugSomething isn't working
@pete-watters

Description

@pete-watters
pete-watters
opened on May 14, 2025

Current behavior

I am trying to use FlashList in React Native but am experiencing issues when trying to import the compiled version. I am having the same issue as #942

If I import FlashList with import { FlashList } from '@shopify/flash-list my UI crashes with a hermes error:
TypeError: Cannot read property '__extends' of undefined, js engine: hermes

Image

If I instead import it from the index, as recommended in #942 - import { FlashList } from '@shopify/flash-list

FlashList works but I get a flood of Type errors:

Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(213,11): error TS2345: Argument of type 'T | undefined' is not assignable to parameter of type 'T'.
  'T' could be instantiated with an arbitrary type which could be unrelated to 'T | undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(238,11): error TS2345: Argument of type 'T | undefined' is not assignable to parameter of type 'T'.
  'T' could be instantiated with an arbitrary type which could be unrelated to 'T | undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(248,11): error TS2345: Argument of type 'T | undefined' is not assignable to parameter of type 'T'.
  'T' could be instantiated with an arbitrary type which could be unrelated to 'T | undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(259,11): error TS2345: Argument of type 'T | undefined' is not assignable to parameter of type 'T'.
  'T' could be instantiated with an arbitrary type which could be unrelated to 'T | undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(274,31): error TS7030: Not all code paths return a value.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(369,11): error TS2322: Type '(props: object, children: React.ReactNode[]) => React.JSX.Element' is not assignable to type '(props?: object | undefined, children?: ReactNode) => ReactNode'.
  Types of parameters 'props' and 'props' are incompatible.
    Type 'object | undefined' is not assignable to type 'object'.
      Type 'undefined' is not assignable to type 'object'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(383,11): error TS2322: Type '(event: NativeSyntheticEvent<NativeScrollEvent>) => void' is not assignable to type '(rawEvent: ScrollEvent, offsetX: number, offsetY: number) => void'.
  Types of parameters 'event' and 'rawEvent' are incompatible.
    Type 'ScrollEvent' is missing the following properties from type 'NativeSyntheticEvent<NativeScrollEvent>': currentTarget, target, bubbles, cancelable, and 10 more.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(520,11): error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PureComponentWrapperProps): PureComponentWrapper', gave the following error.
    Type '(index: number) => React.JSX.Element' is not assignable to type '(arg: unknown) => Element | null'.
      Types of parameters 'index' and 'arg' are incompatible.
        Type 'unknown' is not assignable to type 'number'.
  Overload 2 of 2, '(props: PureComponentWrapperProps, context: any): PureComponentWrapper', gave the following error.
    Type '(index: number) => React.JSX.Element' is not assignable to type '(arg: unknown) => Element | null'.
      Types of parameters 'index' and 'arg' are incompatible.
        Type 'unknown' is not assignable to type 'number'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41[563](https://github.com/leather-io/mono/actions/runs/15013601025/job/42186702268?pr=1171#step:4:579)c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(618,11): error TS2345: Argument of type 'RenderTarget | undefined' is not assignable to parameter of type 'RenderTarget'.
  Type 'undefined' is not assignable to type 'RenderTarget'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(630,28): error TS2604: JSX element type 'PassedComponent' does not have any construct or call signatures.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(630,28): error TS2786: 'PassedComponent' cannot be used as a JSX component.
  Its type 'ReactElement<any, string | JSXElementConstructor<any>> | ComponentType<{}>' is not a valid JSX element type.
    Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ElementType'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(645,45): error TS2345: Argument of type 'RenderTarget | undefined' is not assignable to parameter of type 'RenderTarget'.
  Type 'undefined' is not assignable to type 'RenderTarget'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(651,7): error TS2322: Type 'T | undefined' is not assignable to type 'T'.
  'T' could be instantiated with an arbitrary type which could be unrelated to 'T | undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(679,45): error TS2345: Argument of type 'RenderTarget | undefined' is not assignable to parameter of type 'RenderTarget'.
  Type 'undefined' is not assignable to type 'RenderTarget'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/FlashList.tsx(707,9): error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PureComponentWrapperProps): PureComponentWrapper', gave the following error.
    Type '(index: number) => JSX.Element' is not assignable to type '(arg: unknown) => Element | null'.
      Types of parameters 'index' and 'arg' are incompatible.
        Type 'unknown' is not assignable to type 'number'.
  Overload 2 of 2, '(props: PureComponentWrapperProps, context: any): PureComponentWrapper', gave the following error.
    Type '(index: number) => JSX.Element' is not assignable to type '(arg: unknown) => Element | null'.
      Types of parameters 'index' and 'arg' are incompatible.
        Type 'unknown' is not assignable to type 'number'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/GridLayoutProviderWithProps.ts(158,7): error TS2322: Type '{ isOverridden?: boolean; type?: string | number | undefined; height?: number | undefined; width?: number | undefined; x?: number | undefined; y?: number | undefined; }' is not assignable to type 'Layout'.
  Types of property 'type' are incompatible.
    Type 'string | number | undefined' is not assignable to type 'string | number'.
      Type 'undefined' is not assignable to type 'string | number'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(323,15): error TS2532: Object is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(323,40): error TS2532: Object is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(331,11): error TS2345: Argument of type 'T | undefined' is not assignable to parameter of type 'T'.
  'T' could be instantiated with an arbitrary type which could be unrelated to 'T | undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(336,9): error TS2532: Object is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(339,7): error TS2532: Object is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(340,9): error TS2322: Type 'T | undefined' is not assignable to type 'T'.
  'T' could be instantiated with an arbitrary type which could be unrelated to 'T | undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(362,9): error TS2345: Argument of type 'MasonryListItem<T>[] | undefined' is not assignable to parameter of type 'MasonryListItem<T>[]'.
  Type 'undefined' is not assignable to type 'MasonryListItem<T>[]'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(444,9): error TS18048: 'token' is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(444,33): error TS18048: 'token' is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(445,11): error TS18048: 'token' is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(446,9): error TS18048: 'token' is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(446,23): error TS18048: 'token' is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(447,9): error TS18048: 'token' is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(447,22): error TS18048: 'token' is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(449,9): error TS18048: 'token' is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/MasonryFlashList.tsx(450,9): error TS18048: 'token' is possibly 'undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/benchmark/useDataMultiplier.ts(16,5): error TS2322: Type 'T | {} | undefined' is not assignable to type 'T'.
  'T' could be instantiated with an arbitrary type which could be unrelated to 'T | {} | undefined'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(3,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(4,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(5,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(6,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(7,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(13,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(14,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(18,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(19,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(24,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(28,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(29,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(33,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(34,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(35,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(36,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(37,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(38,3): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(40,24): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/index.ts(42,10): error TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'.
Error: ../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]__fd22fd1027109ff2ca7e41563c111e1b/node_modules/@shopify/flash-list/src/native/auto-layout/AutoLayoutView.tsx(53,7): error TS2722: Cannot invoke an object which is possibly 'undefined'.

Expected behavior

I expect to:

  • be able to import FlashList from the main folder and for it to work correctly
    • import { FlashList } from '@shopify/flash-list'
  • or to import it from src but to not have type errors

To Reproduce

Platform:

  • [ X ] iOS
  • [ X ] Android

Environment

I tried 1.8.0 and also the latest beta version v2.0.0-alpha.10

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions