'AutoSizer' cannot be used as a JSX component

[mbagatini]

Hello team! I'd like to request some help, I am facing an issue in typescript, check it out:

Bug Report

Repo:
https://github.com/mbagatini/05-performance

Component:
src/components/SearchResultsVirtualized.tsx

What is the current behavior?

I'm getting the error "'AutoSizer' cannot be used as a JSX component." The same happens with List.

If you need more details, please let me know.

What is the expected behavior?

To solve the errors that are happening.

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

Browser	Edge
OS	Windows 10
React	18.0.0
React DOM	18.0.0
react-virtualized	9.22.3

[rebelliard]

I believe this is caused by an incompatible version of react in your repository (^18), whereas the current peer dependency of react-virtualized dictates ^17.0.1.

[mbagatini]

Hi Rafael!

I have updated the dependencies:

  "dependencies": {
    "next": "12.1.5",
    "react": "^17.0.0",
    "react-dom": "17.0.1",
    "react-virtualized": "^9.22.3"
  },

But the error with the List component persists:

Am I doing something wrong?

[rebelliard]

🤔. I'll try to reproduce it in a sandbox tonight.

[sohhamm]

facing the exact same issue

[tippfelher]

Ran into the same issue and solved it with this method.

Using react*@18.0.0 in my project.

Thus I had to add

  "resolutions": {
    "@types/react": "18.0.0",
    "@types/react-dom": "18.0.0"
  }

to my composer.json and run yarn after this.

[mbagatini]

Thanks a lot @tippfelher! It solved the issue perfectly.

[mohituprim]

By downgrading @types/react version worked for me

"dependencies": {
"@types/react": "^17.0.0",
}

[Reed-Anderson]

Is there a similar solution for npm users?

[wind4gis]

"resolutions": { "@types/react": "17.0.0" }

Seems like this can be solved

[mttetc]

This shouldn't be happening and this issue shouldn't be closed.

[AChristoff]

Is there a way we can enjoy a new version compatible with the new react versions 17 18.... React-virtualized awesome but it is not touched for more than two years : /

[khRasikh]

I have faced the same issue.

[damiangreen]

This case needs re-opening

[uwemneku]

While working with a turbo repo, none of the suggestions above worked for me. I had to type cast

import {
  AutoSizer as _AutoSizer,
  List as _List,
  ListProps,
  AutoSizerProps,
} from "react-virtualized";

const List = _List as unknown as FC<ListProps>;
const AutoSizer = _AutoSizer as unknown as FC<AutoSizerProps>;

[sohammondal]

While working with a turbo repo, none of the suggestions above worked for me. I had to type cast

import {
  AutoSizer as _AutoSizer,
  List as _List,
  ListProps,
  AutoSizerProps,
} from "react-virtualized";

const List = _List as unknown as FC<ListProps>;
const AutoSizer = _AutoSizer as unknown as FC<AutoSizerProps>;

This solved the issue for me without the need to downgrade React.

[jeespu]

While working with a turbo repo, none of the suggestions above worked for me. I had to type cast

import {
  AutoSizer as _AutoSizer,
  List as _List,
  ListProps,
  AutoSizerProps,
} from "react-virtualized";

const List = _List as unknown as FC<ListProps>;
const AutoSizer = _AutoSizer as unknown as FC<AutoSizerProps>;

I can't thank you enough. Fought with this issue for two days and downgrading React because of just one library felt like a red flag.

[mleister97]

While working with a turbo repo, none of the suggestions above worked for me. I had to type cast

import {
  AutoSizer as _AutoSizer,
  List as _List,
  ListProps,
  AutoSizerProps,
} from "react-virtualized";

const List = _List as unknown as FC<ListProps>;
const AutoSizer = _AutoSizer as unknown as FC<AutoSizerProps>;

Thanks a lot. This should be fixed, isn't the library updated anymore?

[dmitryshostak]

import { FC } from 'react';
import {
  AutoSizer as _AutoSizer,
  List as _List,
  InfiniteLoader as _InfiniteLoader,
  ListProps,
  AutoSizerProps,
  InfiniteLoaderProps,
} from 'react-virtualized';

export const VirtualizedList = _List as unknown as FC<ListProps> & _List;
// You need this one if you'd want to get the list ref to operate it outside React 👍 
export type VirtualizedListType = typeof VirtualizedList;

export const AutoSizer = _AutoSizer as unknown as FC<AutoSizerProps> & _AutoSizer;
export const InfiniteLoader = _InfiniteLoader as unknown as FC<InfiniteLoaderProps> & _InfiniteLoader;

[fabianboerner]

Hi, i still have this issue, why is it closed?

[mariorodriguespt]

Please reopen this

[MeganOosthoekKodiak]

running yarn dedupe fixed this for me