인프런 커뮤니티 질문&답변

타입 포함된 버전을 설치한 후에도 타입에러가 계속 생기는데

버전이슈일까요..

"dependencies": {
    "@ant-design/icons": "^5.5.2",
    "@apollo/client": "^3.11.9",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "antd": "^5.21.6",
    "axios": "^1.7.7",
    "graphql": "^16.9.0",
    "lodash": "^4.17.21",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-daum-postcode": "^3.2.0",
    "react-dom": "17.0.2",
    "react-infinite-scroller": "^1.2.6",
    "ts-node": "^10.9.2"
  },
"devDependencies": {
    "@eslint/js": "^9.18.0",
    "@graphql-codegen/cli": "^5.0.3",
    "@graphql-codegen/typescript": "^4.1.2",
    "@types/node": "17.0.2",
    "@types/react": "17.0.2",
    "@types/react-infinite-scroller": "^1.2.5",
    "eslint": "^9.18.0",
    "eslint-config-next": "15.1.4",
    "eslint-config-prettier": "^10.0.1",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.37.4",
    "globals": "^15.14.0",
    "prettier": "^3.4.2",
    "typescript": "^5.7.3",
    "typescript-eslint": "^8.20.0"

"react-infinite-scroller": "^1.2.6", 이고
"@types/react-infinite-scroller": "^1.2.5",

로 되어있습니다.

++

return (
    <div style={{ height: '700px', overflow: 'auto' }}>
      <InfiniteScroll
        pageStart={0}
        loadMore={onLoadMore}
        hasMore={hasMorePosts}
        loader={
          <div className='loader' key='loader'>
            Loading...
          </div>
        }
        useWindow={false}
      >
        {data?.fetchBoards?.map((el) =>
          el ? (
            <div key={el._id}>
              <span style={{ margin: '10px' }}>{el.title}</span>
              <span style={{ margin: '10px' }}>{el.writer}</span>
            </div>
          ) : null,
        ) ?? []}
      </InfiniteScroll>
    </div>
  );

1. InfiniteScroll
'InfiniteScroll' cannot be used as a JSX component. Its instance type 'InfiniteScroll' is not a valid JSX element. Property 'refs' is missing in type 'InfiniteScroll' but required in type 'ElementClass' 3. loader Type 'Element' is not assignable to type ReactElement<unknown, string | JSXElementConstructor<any>> Types of property 'key' are incompatible. TYpe 'Key | null' is not assignable to type 'string | null'. Type 'number' is not assignable to type 'string'. 4. {data?.~</div>;})} Type 'void[] | undefined' is not assignable to type 'ReactNode'.

2. {data?.~</div>;})}

Type 'void[] | undefined' is not assignable to type 'ReactNode'. (이하 생략)

이런 에러였었는데,

상단에 타입선언 해주고 모두 해결 되었습니다.

import React, { ReactElement } from 'react';

declare module 'react-infinite-scroller' {
  interface InfiniteScrollProps {
    pageStart?: number;
    loadMore: () => void;
    hasMore?: boolean;
    loader?: ReactElement | null;
    useWindow?: boolean;
    children?: React.ReactNode;
  }

  export default function InfiniteScroll(props: InfiniteScrollProps): ReactElement;
}

모듈이 덜 설치된건지 ㅠㅠ 왜 이런 에러가 생긴지 모르겠네요 ㅠㅠ